如何將 FormArray 與 Angular 反應式 forms 的 FormGroups 一起使用？

Question

我試圖以我的反應形式模仿我的 model。 我已經設置了一些 FormGroups 來“嵌套”根據我的 model 有意義的東西。我在設置我的組件以讀取值時遇到了問題——這表明我可能沒有正確設置我的模板任何一個。

取決於我是在編輯現有位置還是創建新位置，

@Input() location: ILocation;

可能是undefined的。 目前我只專注於使用現有位置，所以我知道location是有價值的。

// location.model.ts

name: string;
...
messaging: [
    {
        email: {
            fromName: string;
            fromAddress: string;
        };
    }
];
...
createdAt?: string;
updatedAt?: string;
deletedAt?: string;

在我的模板中，我使用ngClass為用戶提供驗證反饋：

// location.commponent.html

<div formGroupName="messaging">
    <div formGroupName="email">
        ...
        <div [ngClass]="form.get(['messaging', 'email', 'fromName'])!.errors && (form.get(['messaging', 'email', 'fromName'])!.dirty || form.get(['messaging', 'email', 'fromName'])!.touched) ? 'red' : 'green'">
            <input name="fromName"/>
        </div>
        <!-- fromAddress -->
    </div>
</div>

在我的組件中，我通過輸入綁定傳遞 model，然后設置我的表單組和表單字段，如下所示：

// location.component.ts

@Input() location: ILocation; 

form: FormGroup;

...

ngOnInit(): void {
    this.form = new FormGroup({name: new FormControl(this.location.name, [Validators.required]),
    messaging: new FormGroup({
    email: new FormGroup({
        fromName: new FormControl(this.location.messaging[0].email.fromName, [Validators.required]),
        fromAddress: new FormControl(this.location.messaging[0].email.fromAddress, [Validators.required]),
        }),
    }),
}

我看到的錯誤是：

無法讀取未定義的屬性（讀取“電子郵件”）

如果我注銷組件中的內容：

console.log('messaging: ', this.location.messaging);

// email: {fromName: 'No Reply <noreply@example.com>', fromAddress: 'noreply@example.com'}

我嘗試了各種messaging['email']或messaging.email messaging[0]方法，但我似乎找不到正確的路徑。

我也不確定我是否在我的模板中正確使用了get()方法。

如何設置我的表單以正確讀取/顯示數據？

更新：

毫不奇怪，我遇到的一個大問題是發回錯誤形狀的數據。

最后，這是我要創建的 JSON：

[{"email":{"fromName":"No Reply <noreply@example.com>","fromAddress":"noreply@example.com"}}]

看起來我需要使用FormArray來發送正確的形狀：

messaging: new FormArray([
    new FormGroup({
        email: new FormGroup({
            fromName: new FormControl(this.location.messaging[0].email.fromName, [Validators.required]),
            fromAddress: new FormControl(this.location.messaging[0].email.fromAddress, [Validators.required]),
        }),
    }),
]),

這在我的模板中造成了一些麻煩，因為我目前正在這樣做： form.get('messaging[0].email.fromAddress')

導致：

錯誤：找不到路徑為“消息傳遞 -> 電子郵件”的控件

我想我需要以某種方式循環遍歷FormArray 。 不過，這確實不是動態數組。 我將始終擁有email並且只有fromName和fromAddress 。

Answer 1

是的，您需要FormArray ，因為messaging是一個數組。

您需要通過*ngFor迭代FormArray中的每個元素並提供索引（ i ）：

form.get(['messaging', i, 'email', 'fromName'])

從父 FormGroup 到fromName FormControl的模板表單的完整流程是：

表單 ( FormGroup ) --> 消息 ( FormArray ) --> i ( FormGroup ) --> email( FormGroup ) --> fromName( FormControl )

HTML 模板應該是：

<div [formGroup]="form">
  <div
    formArrayName="messaging"
    *ngFor="let control of messaging.controls; let i = index"
  >
    <ng-container [formGroupName]="i">
      <div formGroupName="email">
        ...
        <div
          [ngClass]="
            form.get(['messaging', i, 'email', 'fromName'])!.errors &&
            (form.get(['messaging', i, 'email', 'fromName'])!.dirty ||
              form.get(['messaging', i, 'email', 'fromName'])!.touched)
              ? 'red'
              : 'green'
          "
        >
          <input formControlName="fromName" />
        </div>
        <div>
          <!-- fromAddress -->
          <input formControlName="fromAddress" />
        </div>
      </div>
    </ng-container>
  </div>
</div>

get messaging(): FormArray {
  return this.form.get('messaging') as FormArray;
}

演示 @ StackBlitz