Angular 數據綁定重復

Question

我創建了一個表格。 然后我添加了一個鏈接來添加一個像以前一樣的部分

單擊添加另一個地址時，它顯示地址 2 表單

然后我單擊第一個輸入字段，驗證錯誤也以第二種形式顯示

如何解決這個問題？

app.component.html

<label for="line1">STREET 1</label>
   <input id="line1" type="text" formControlName="line1" required/>
   <error-component
      [control]="formAddress.controls.line1">
   </error-component>

app.component.ts

formAddress = this.formBuilder.group({
    line1: ["", Validators.required],
    line2: '',
    postalCode: ["", Validators.required],
  });

Answer 1

您的問題是您只是在重復“相同”的 FormGroup。 （檢查您的代碼以查看您是否有一個唯一的 formGroup。請記住，如果我們有一個數組並使用類似的內容：

  formGrup="..."
  array=[this.formGroup]
  //in any place
  array.push(this.formGroup)

  //the two elements of the array is the same formGroup!!!

一個解決方案：這個想法是使用 FormGroups 的 FormArray（另一個是使用 FormGroup 的數組）

當我們有一個 FormGroups 數組時，我們創建一個 function 返回一個 FormGroup

createAddressGroup()
{
  return new FormGroup({
    line1:new FormControl("", Validators.required),
    line2: new FormControl(''),
    postalCode: new FormControl("", Validators.required),
  })
}

而我們創建de he formArray，並創建一個function來將一個新的FormGroup添加到數組中，另一個刪除

formArray=new FormArray([this.createAddressGroup()])

addAddress()
{
   this.formArray.push(this.createAddressGroup());
}
removeAddress(index:number)
{
   this.formArray.removeAt(index);
}

當管理不在 FormGroup 內的 FormArray 時，我們需要創建一個返回 formGroup 的 function

getAddress(index:number)
{
   return this.formArray.at(index) as FormGroup
}

好了，一切准備就緒，可以創建.html

<!--see that iterate over formArray.controls, and we indicate
    the formGroup using formGroup]="getAddress(i)"-->
<fieldset *ngFor="let group of formArray.controls;let i=index"
     [formGroup]="getAddress(i)">
     <legend>{{'Address '+(i+1)}}</leyend>
     <div>
        <label for="email">Street 1</label>
        <input id="email" formControlName="line1" />
        <div class="invalid-feedback">
            * Required
        </div>
    </div>
     <div>
        <label for="email">Street 2</label>
        <input id="email" formControlName="line2" />
    </div>
     <div>
        <label for="email">Country</label>
        <input id="email" formControlName="postalCode" />
        <div class="invalid-feedback">
            * Required
        </div>
    </div>
</fieldset>

我在哪里使用 .css 顯示在這個SO和這個stackblitz

.invalid-feedback
{
   display:none
}
.ng-invalid.ng-touched ~ .invalid-feedback
{
  display: block;
}

Answer 2

您必須使用“數組迭代”中的索引來構建每個字段的“for”和“id”屬性。 喜歡

<ng-container formArrayName="files">
    ...
    <ng-container [formGroupName]="i">

            <label [for]="'file_name_' + i.toString()">
              {{ "contents.practice.fields.files.name" | translate }}
            </label>
            <div class="form-control">
              <input
                pInputText
                [id]="'file_name_' + i.toString()"
                type="text"
                formControlName="name"
                autocomplete="off"
                class="flex-auto"
              />
            </div>