web-dev-qa-db-ja.com

Angular 6ネストされたFormGroupテンプレートの検証

私のフォームグループ構造は次のようになります（order.component.ts）：

_this.orderForm = this.formBuilder.group({
  customer: this.formBuilder.group({
    name: ['', Validators.required],
    phone: ['', Validators.required],
    email: ['', Validators.required]
  }),
  ...
});
_

テンプレート（order.component.html）には次のものがあります。

_<form [formGroup]="orderForm" (ngSubmit)="onSubmit()">
  <fieldset formGroupName="customer">
    <legend>Customer Information</legend>
    <label for="name">Full name:</label>
    <input type="text" formControlName="name" class="form-control" name="name" id="name" required>
    <small class="form-text text-danger" *ngIf="orderForm.controls['customer'].controls['name'].invalid && (orderForm.controls['customer'].controls['name'].dirty || orderForm.controls['customer'].controls['name'].touched)">Name invalid</small>
  </fieldset>
  ...
</form>
_

これは機能しますが、_orderForm.controls['customer'].controls['name']_を表現するより短い方法ですか？たとえば、* ngIf条件を"name.invalid && (name.dirty || name.touched)"にする方が簡潔です。

angularangular6angular-template
4
Alex Mohr

はい、それはネストされたフォームControlをフェッチする正しい方法であり、ショートカットはありません。

または、orderForm.get('customer')フォームオブジェクトを指すプロパティをコンポーネントに作成することもできます

_private customerForm : FormGroup
_

フォームの初期化後に割り当てます

_this.customerForm = this.orderForm.get('customer')
_

{{customerForm.get('name').valid}}のようにフェッチします

3
Amit Chigadani

私は同じ問題に遭遇しました。私の主な問題は、ng build --prodを使用するとorderForm.controls['customer'].controls['name']が失敗してエラーが発生することでした。

プロパティ「controls」はタイプ「AbstractControl」に存在しません。

どうやらこれは、テンプレートがTSにコンパイルされるときのタイプの問題です。

私のアプローチは、ネストされたフォームグループのゲッターを作成し、私の問題とあなたの問題の両方を解決する正しい型をキャストすることです。

get customer() {
  return this.orderForm.controls.customer as FormGroup;
}

hTMLで使用：

<small class="form-text text-danger" *ngIf="customer.controls['name'].invalid && (customer.controls['name'].dirty || customer.controls['name'].touched)">Name invalid</small>
2
Martin Nuc