FormBuilderを使用して初期状態ではあるが無効なフォームを強調表示する

Question

FormBuilderを角2で使用すると、汚いフィールドと無効なフィールドを強調表示するのが簡単です。ただし、フィールドをダーティに変更することなく、元の形で無効なフォームを提出することはできます。

たとえば、このコードでは、入力に触れずにフォームを送信すると、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