import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
fileInput: ['', [Validators.required], [this.fileSizeValidator()]]
});
}
fileSizeValidator() {
return (control: FormControl) => {
const file = control.value;
if (file) {
const fileSize = file.size / 1024 / 1024; // Convert to MB
if (fileSize > 2) {
return {
fileSizeExceeded: true
};
}
}
return null;
};
}
onSubmit() {
// Submit code here
}
}
在上面的代码中,我们使用了Angular的FormBuilder服务来初始化了表单,并在表单控件上添加了一个自定义验证器函数,该函数会检查文件是否超过了2MB的限制。如果文件大小超过了2MB,则会返回一个名为“fileSizeExceeded”的错误,否则会返回null。