使用 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)
}

分叉插件：http://plnkr.co/edit/k8iXCLyKIIm8QN1wgMVg?p=preview

使用 FormBuilder 突出显示原始但无效的表单

Using FormBuilder to highlight a pristine but invalid form

angularjs

angular

angular2-template

angular2-forms

angular2-formbuilder