angular - 如何在 formGroup 中从 typescript 传递自定义字符串，并在模板内的 *ngFor 中读取它的值？

Question

考虑模板中的以下 formArray 摘录:

<div class="p-col-12 controls-div" formArrayName="fields">
    <div
        class="p-grid"
        *ngFor="let item of getFieldControls(); let i = index"
        [formGroupName]="i"
        style="margin-top: 10px;">
        <div class="p-col-8">
            <!-- if string is Text -->
            <input
                *ngIf="string == 'Text'"
                type="text"
                pInputText
                formControlName="control">
            <!-- if string is number -->
            <input
                *ngIf="string == 'Number'"
                type="text"
                pInputText
                formControlName="control">
             <!-- if string is Yes/No -->
             <p-toggleButton
                *ngIf="string == 'Yes/No'" 
                onLabel="Yes" 
                offLabel="No" 
                formControlName="control"></p-toggleButton>
        </div>
        <div class="p-col-2">
        <button
            type="button"
            class="btn btn-danger"
            (click)="onDeleteField(i)">X</button>
        </div>
    </div>                        
</div>

我想从我的 getFieldControls() 方法中传递一个字符串，并在 *ngFor 循环中将控件绑定(bind)到正确的“控件类型”(元素)。我的问题是我尝试了 100 种不同的方法来传递这个字符串。我尝试像这样添加数据类型属性:

(<FormArray>this.itemForm.get('fields')).push(
        new FormGroup({
          'control': new FormControl(
            {data-type: 'number', value:variable.name, disabled:true}, [Validators.required])
        })
      );

然后我想在模板中阅读它，如下所示:

*ngIf="item[0].control.data-type == 'text'"

但编译器提示。看来我只能传递值并禁用。后来我尝试为表单组设置一个值，也没有运气。如果我可以传递一个字符串，我就会知道将哪个控件加载到模板中的 DOM 中。我还尝试从 typescript 直接、动态地添加元素，如下所示:

<div [innerHTML]="elementToAdd"></div>

在 typescript 中

if (this.type == 'number') {
    elementToAdd += '<input type="number" ...>';
}

当我这样做时，每次添加一个控件时，我都会添加 4 个或 8 个控件。在一天结束的时候，我会得到一个，让我们说模板中的“下拉列表”、值(字符串)和 *ngIf 只有下拉列表，然后绑定(bind)到它。
我使用数组根据 id 查找要加载的控件类型。我推送新控件的方法如下所示:

onAddField(id: string) {
    let variable = this.variables.find(i => i.id === id);
    
    if (variable?.control == 'Text') {
      //add an Input
      (<FormArray>this.itemForm.get('fields')).push(
        new FormGroup({
          'control': new FormControl(
            {value:variable.name, disabled:true}, Validators.required)
        })
      );
    }
    if (variable?.control == 'Number') {
      //add an Input
      (<FormArray>this.itemForm.get('fields')).push(
        new FormGroup({
          'control': new FormControl(
            {value:variable.name, disabled:true}, Validators.required)
        })
      );
    }
    //somewhere in the formgroup or formcontrol I want to pass a string so that I can know which form control to load, using *ngIf,in the template.
  }

我像这样初始化我的表单:

this.itemForm = new FormGroup({
  fields: new FormArray([])
});

要获得控件，这是我的方法:

getFieldControls() {
  let controls = (this.itemForm.get('fields') as FormArray).controls;
  return controls;
}

Answer 1

你可以这样做。

<div class="p-col-12 controls-div" formArrayName="fields">
    <div
        class="p-grid"
        *ngFor="let item of getFieldControls(); let i = index"
        [formGroupName]="i"
        style="margin-top: 10px;">
          <div class="p-col-8">
            <!-- if string is Text -->
            <input
                *ngIf="typeList[index] == 'Text'"
                type="text"
                pInputText
                formControlName="control">
            <!-- if string is number -->
            <input
                *ngIf="typeList[index] == 'Number'"
                type="text"
                pInputText
                formControlName="control">
             <!-- if string is Yes/No -->
             <p-toggleButton
                *ngIf="typeList[index] == 'Yes/No'" 
                onLabel="Yes" 
                offLabel="No" 
                formControlName="control"></p-toggleButton>
        </div>
        <div class="p-col-2">
        <button
            type="button"
            class="btn btn-danger"
            (click)="onDeleteField(i)">X</button>
        </div>
    </div>                        
</div>

在 onAddField()你可以这样做。因为我认为 variable这里有点相关。

typeList: stringp[] = [];
onAddField(id: string) {
    let variable = this.variables.find(i => i.id === id);
    this.typeList.push(variable?.control)
    
    if (variable?.control == 'Text') {
      //add an Input
      (<FormArray>this.itemForm.get('fields')).push(
        new FormGroup({
          'control': new FormControl(
            {value:variable.name, disabled:true}, Validators.required)
        })
      );
    }
    if (variable?.control == 'Number') {
      //add an Input
      (<FormArray>this.itemForm.get('fields')).push(
        new FormGroup({
          'control': new FormControl(
            {value:variable.name, disabled:true}, Validators.required)
        })
      );
    }
    //somewhere in the formgroup or formcontrol I want to pass a string so that I can know which form control to load, using *ngIf,in the template.
  }