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

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

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

1 个答案: