0

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をダーティに変更できますか?

4

1 に答える 1

2

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

分岐プランカー: http://plnkr.co/edit/k8iXCLyKIIm8QN1wgMVg?p=preview

于 2016-11-11T00:13:42.083 に答える