根据动态表单控件更改更新文本值答案

【问题标题】：Update text value according to Dynamic Form Control Changes根据动态表单控件更改更新文本值
【发布时间】：2021-01-19 16:20:44
【问题描述】：

我使用 FormArray 动态生成了表单控件。每个控件在 <p> 内都有关联的文本值。当来自控件的相关更改时，我想相应地更新关联的 <p> 值。我该如何实现。

在我的 TS 文件中

this.fb.group({guestTemps: this.fb.array([])}) 

onInit():void{
    this.generateFields(this.dataArray)
}

generateFields(array:Array<any>){
  let ref =this.tempInputForm.get('guestTemps') as FormArray;
  array.forEach(items => {ref.push(this.createField())})
}

createField(): FormGroup {
    return this.fb.group({
      guestId:[""],
      temp:["",Validators.required],
    })
 }

我的模板

   <div [formGroup]="tempInputForm">
        <div class="mb-5" *ngFor="let felids of temperatureFelids.controls; let i = index" 
             formArrayName="guestTemps">
                <div [formGroupName]="i">
                    <label for="guesName" class="label-text" formControlName="guestId"> Guest Last Name</label>
                    <input type="text"  id="guesName+{{i}}" formControlName="temp" />
                </div>
                 //i want update the text here when the form contro changes
                <p  class="temperature-indi-msg">i want update the text here</p>
          </div>
     </div>

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

鉴于您正在遍历 FormControls 列表，您可以简单地访问控件的值以有条件地显示内容：

<div [formGroup]="tempInputForm">
    <div class="mb-5" 
         *ngFor="let felids of temperatureFelids.controls; let i = index" 
         formArrayName="guestTemps">
         <div [formGroupName]="i">
             <label for="guesName" class="label-text" formControlName="guestId"> Guest Last Name</label>
                 <input type="text"  id="guesName+{{i}}" formControlName="temp" />
         </div>
         // Access the value of the FormControl to modify the contents of the <p> tag
         <p  class="temperature-indi-msg">{{felids.value ? 'truthy value' : 'falsey value'}}</p>
    </div>
</div>

【讨论】：