如何在Angular中將ReactiveFormsModule和驗證用於動態添加的控件？

Question

我有幾個像這樣連接到FormBuilder的字段。

constructor(private builder: FormBuilder) {
  this.form = builder.group({
    "firstName": [...],
    "lastName": [...]
  });
}

在標記中，除了修復控件之外，我還將擁有數量未知的輸入框。 它從零開始，可以隨着用戶單擊按鈕的增加而增加，每次單擊都會添加一個新的輸入框。 每個輸入框還將有一個刪除按鈕，因此輸入框的數量是完全動態的。

<div class="input-caption">FirstName</div>
<input type="text" formControlName="firstName">

<div class="input-caption">LastName</div>
<input type="text" formControlName="lastName">

<div id="options"></div>
<button (click)="addOption()">Add option</button>

由於需要驗證動態添加的字段，因此我覺得需要在組定義中聲明它們。 我不知道如何。

當我用Google搜索時，我在[(ngModel)]上獲得了很多成功，但我也讀到它應該與FormsModule一起使用，而不是博客中討論的ReactiveFormsModule一起使用。

我應該如何處理？ 綁定ngModel是唯一的選擇嗎？

根據答案進行編輯 。

HTML

<div *ngFor="let tag of []; let i = index;" [formGroupName]="i">
  <div class="input-caption">Tag</div>
  <input formControlName="name"> -->
</div>

TS

constructor(private builder: FormBuilder) {
  this.form = builder.group({
    "firstName": [...],
    "lastName": [...],
    "tags": this.builder.array([]),
  });
}

addTag(): void {
  (this.form.controls.tags as FormArray).???;
}

我還嘗試按如下所示在標記中指定一個硬編碼的數組，但沒有看到任何呈現的控件。

<div *ngFor="let tag of [{'name':'uno'},{'name':'duo'}]; let i = index;" 
     [formGroupName]="i">
  <div class="input-caption">Tag</div>
  <input formControlName="name"> -->
</div>

Answer 1

您的情況是FormArray的目的。 請參閱此處的文檔： https : //angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups

該文檔顯示了一個FormGroups數組，但是您也可以使用它來創建一個FormControls數組。

這是我的應用程序中的一個示例：

    this.productForm = this.fb.group({
        productName: ['', [Validators.required,
                           Validators.minLength(3),
                           Validators.maxLength(50)]],
        productCode: ['', Validators.required],
        starRating: ['', NumberValidators.range(1, 5)],
        tags: this.fb.array([]),
        description: ''
    });

我的“標簽”如下所示：

我將默認值設置為這些控件，如下所示：

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

您可以在這里找到我的示例代碼： https : //github.com/DeborahK/Angular2-ReactiveForms在“ APM”或“ APM-Updated”文件夾中。

這是來自Pluralsight課程的代碼：此處的Angular Reactive Forms ： https ://app.pluralsight.com/library/courses/angular-2-reactive-forms/table-of-contents

Answer 2

如果只希望此代碼起作用，則只需將其更改為數組：

<div *ngFor="let tag of ['uno','duo']; let i = index;" 
     [formGroupName]="i">
  <div class="input-caption">{{ tag }}</div>
  <input formControlName="name"> -->
</div>

他們實際上並不需要成為表單組。 如果不是這樣，可能會更簡單：

<div *ngFor="let tag of ['uno','duo']">
  <div class="input-caption">{{ tag }}</div>
  <input [formControlName]="tag"> -->
</div>

如果這就是您所需要的，那么您甚至根本不需要FormArrays。