使用FormBuilder突出顯示原始但無效的表格

Question

在Angular 2中使用FormBuilder突出顯示髒字段和無效字段很容易。但是，您可以提交原始但無效的表單，而無需將字段更改爲髒。

例如，此代碼將顯示，當您提交表單時未觸摸輸入，FormGroup將無效，但.ng-pristine將保留在文本字段中。這意味着用戶將不會收到有關文本字段出現問題的通知。

@Component({ 
    template: ` 
    <form [formGroup]="myFormGroup"> 
     <input type="text" formGroupName="foo"> 
     <input type="submit" value="Submit" (click)="onSubmit()"> 
    </form> 
    `, 
    styles: [` 
    .ng-dirty.ng-invalid { border: 2px solid red; } 
    `] 
}) 

export class AppComponent { 
    public myFormGroup: FormGroup; 

    constructor(private _fb: FormBuilder) { 
    this.myFormGroup = this._fb.group({ 
     foo: ['', Validators.required] 
    }); 
    } 

    public onSubmit(): void { 
    console.info('is the form pristine?', this.myFormGroup.pristine); 
    console.info('is the form valid?', this.myFormGroup.valid); 
    } 
} 

Plunker的示例。

如何在提交表單時將原始文件FormControl更改爲髒？

Answer 1

任何實現AbstractControl接口的函數都有一個函數.markAsDirty()。所以，在你onSumbit（）：

public onSubmit(): void { 
    this.myFormGroup.markAsDirty(); 
    console.info('is the form pristine?', this.myFormGroup.pristine); 
    console.info('is the form valid?', this.myFormGroup.valid) 
} 

叉形plunker：http://plnkr.co/edit/k8iXCLyKIIm8QN1wgMVg?p=preview