Form Builderを使用したHTMLファイルブラウズのための角度カスタム検証

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)イベントを使用し続けたいが、変更機能ではファイルの値をコントロールに追加する必要があります。また、ファイルでチェックする必要があるものをチェックするカスタムバリデーターを作成する必要があります。

// 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：ここでは、それは（ISCH）をどのように見えるかだ

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制御にあるどのような値をチェックします

関数。

こちらがお役に立てば幸いです。