angularjs - 使用 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

.markAsDirty()实现AbstractControl接口的任何东西都有一个功能。因此，在您的 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