Question

我使用反应式表单验证并需要验证文件上传控件。目前我正在使用更改指令来处理它的验证。

<label class="btn btn-primary btn-file">
   Browse <input type="file" (change)="fileChanged($event)" style="display:none;">
</label>

然后构建表单然后订阅它的更改：

this.myForm = this.formBuilder.group({
            'title': [
                this.chart.title,
                [Validators.required]
            ],
            'description': [
                this.chart.description,
                [Validators.required]
            ]
        });


this.myForm.valueChanges.subscribe(data => this.onValueChanged(data));

我可以将上传/文件浏览到表单构建器并从那里使用自定义验证吗？

Answer 1

首先在表单中创建一个控件，但不通过formControlName将其分配给输入。相反，您希望继续使用(change)事件，然后在更改功能中将文件值添加到控件中。您还想编写一个自定义验证器，它将检查您需要检查的文件。这是它的外观（isch）：

// Add title & description here too
this.myForm = this.fb.group({file: [null, [Validators.required, FileValidator]]});

onValueChanged(file): void {
  this.myForm.get('file').setValue(file);
}

file.validator.ts：

export const FileValidator = (): ValidatorFn => {

  return (control: FormControl): {[key: string]: boolean} => {

    // Do whatever checking you need here
    const valid: boolean = true;

    return valid ? null : {
      file: true
    };
  };
};

验证将检查file控件中的任何值，这样您就不必在单独的函数中手动验证它。

我希望这会有所帮助。

使用表单生成器浏览HTML文件的角度自定义验证

1 个答案: