动态键/值形式反应角度 5答案

【问题标题】：Dynamic key / value form reactive angular 5动态键/值形式反应角度 5
【发布时间】：2018-07-31 03:10:11
【问题描述】：

我找了很久，没有找到我想做的事。我想添加具有角度 5 和反应形式的动态键/值。

当我单击“添加参数”按钮时，会动态显示 2 个输入。一个用于键，另一个用于值。

当我提交表单时，我想得到这个：

{ 设置：{ 键1：值1，键2：值2... } }

这是我所做的：

我的组件：

        constructor(
        protected fb: FormBuilder,

    ) {

        // form init
        this.testForm = fb.group({
            'name': fb.control('', [Validators.required]),
            'desc': fb.control('', [Validators.required]),
            'config': fb.array([])
        });
    }
    
    
    ...

getControls(frmGrp: FormGroup, key: string) {
    return (<FormArray>frmGrp.controls[key]).controls;
}
    
 
    addConfigBlock() {

        let settingBlock = this.testForm.get('setting') as FormArray;

        settingBlock.push(this.fb.group({key: '', value: ''}));


    }

模板.html

                <div fxLayout="column" fxflex="100%" class="form-standard">
                    <div formArrayName="config" *ngFor="let setting of getControls(testForm, 'config'); let i = index;">
                        <div [formGroupName]="i" fxLayout="column" fxFlex="100%"> 
                            <mat-form-field class="form-input"> 
                                <input matInput formControlName="key" name="key" maxlength="255"
                                placeholder="Key" required> 
                            </mat-form-field>
                            <mat-form-field class="form-input"> 
                                <input matInput formControlName="value" name="value" maxlength="255"
                                    placeholder="Value" required> 

                            </mat-form-field>
                        </div>
                    </div>
                </div>
                <mat-card-content class="mat-card-content">
                    <div fxLayout="row" fxLayoutAlign="start stretch" class="form-standard">
                        <div fxFlex.gt-md="100" fxFlex.xs="100">
                            <div fxLayoutAlign="space-around stretch">
                                <button type="button" mat-raised-button color="primary" (click)="addSetting()">Add setting</button>
                            </div>
                        </div>
                    </div>
                </mat-card-content>

我不知道实现这一目标的最佳方法是什么。非常感谢:)

【问题讨论】：

标签： angular forms angular-reactive-forms

【解决方案1】：

我看到它的方式是利用组件中的一个变量来跟踪索引，在每次添加时，增加变量。然后在表单控件的命名中使用该值，因此类似于...

i = 0;

addConfigBlock() {
  let settingBlock = this.testForm.get('config') as FormArray;
  settingBlock.push(this.fb.group({['key'+this.i] : '', ['value'+this.i]: '' }));
  this.i++;
}

并在模板中标记表单控件

formControlName="key{{i}}"
formControlName="value{{i}}"

i 是迭代中的索引。

这是一个

StackBlitz

【讨论】：

感谢您的回答。不幸的是，我有一些错误，我不知道为什么当我填写字段“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生变化。以前的值：'true'。当前值：'false”。
请重现我制作的演示中的问题，我很乐意看看:)
再次感谢您的帮助！您提供的 StackBlitz 有此错误。单击按钮，填写字段并再次单击按钮，您将看到错误出现在控制台中

【解决方案2】：

我想动态添加一个控件，但我确切地知道我想添加哪个控件。发生这种情况是因为我想将所有控件值保存在后端的数组中，而不是单独列出它们。这是一个解决方案：

<form [formGroup]="myForm">
  <div formArrayName="myArray">
    <div [formGroup]="getControl('my_known_control_name')">
      <mat-checkbox formControlName="value">My known control name</mat-checkbox>
    </div>
    <div [formGroup]="getControl('my_second_known_control_name')">
      <mat-checkbox formControlName="value">My second known control name</mat-checkbox>
    </div>
  </div>
</form>

// reactive device form
myForm!: FormGroup = this.fb.group({
  myArray: this.fb.array([]),
});

constructor(private fb: FormBuilder) {}

getControl(field: string): FormGroup {
  var myArray = this.myForm.get('myArray') as FormArray | null;
  var existingControl = myArray?.controls.find(c => c.value["name"] === field);
  if (existingControl) {
    return existingControl as FormGroup;
  } else {
    var newControl = this.fb.group({
      name: field,
      value: undefined,
    });
    myArray?.push(newControl);
    return newControl;
  }
}

【讨论】：