使用数组的Angular2反应表单 - 覆盖问题

Question

我有一个页面，其中包含一些供用户填写的默认字段。然后，他们可以在页面上添加其他数据点，并在FormGroup中为该新数组项创建一个新数组。

我的问题是，当添加新的表单字段/组时，某些东西会导致页面上的原始字段被覆盖，即使我正在做的是将新控件推送到数组。

组件：

ngOnInit() {
    this.loadVars();
    this.renderAddRuleForm();
}

/**
 * Loads the variables from our service
 *
 * @memberof AddRuleComponent
 */
loadVars() {
    this.outcomes = this._mserv.fetchOutcomeTypes();
    this.variables = this._mserv.fetchRuleVariables();
}

/**
 * Render our Add Rule Form
 *
 * @memberof AddRuleComponent
 */
renderAddRuleForm() {
    this.addRuleForm = this._fb.group({
        ruleName: [''],
        ruleDescription: [''],
        ruleOutcome: [''],
        addVariable: [''],
        variables: this._fb.array([])
    });
}

/**
 * Dynamically add a new variable to our form
 *
 * @param {any} vid
 * @param {any} vname
 * @param {any} voperator
 * @param {any} vvalues
 * @returns
 * @memberof AddRuleComponent
 */
buildVariable(vid, vname, voperator, vvalues) {
    return new FormGroup({
        id: new FormControl(vid),
        name: new FormControl(vname),
        operator: new FormControl(''),
        values: new FormControl([]),
    })
}

/**
 * Add a variable to our selection
 *
 * @memberof AddRuleComponent
 */
addVariable(varID) {

    // Which variable are we adding
    this.selectedVariable = varID;
    this.formVariables = this.addRuleForm.get('variables') as FormArray;

    // Loop over our variables
    for (const key in this.variables) {

        // Find our properties by key name
        if (this.variables.hasOwnProperty(key)) {

            // If the multiple flag is true, add it to the array
            if (this.variables[key].id == this.selectedVariable) {

                // Push the variable object to our selected array
                this.selectedVariables.push(this.variables[key]);
                this.formVariables.push(this.buildVariable(this.variables[key].id, this.variables[key].name, '', ''));

            }
        }
    }

    // Call next on our behavior subject to update our subscriber
    this._mserv.updateVarSelection(this.selectedVariables);
}

您会在addVariable函数中注意到我正在将新变量推送到formArray。

当发生这种情况时，表单上的所有现有输入都会接收添加的最新输入的值，就像它们被覆盖一样。

<table class="table table-condensed" *ngIf="selectedVariables.length">
   <thead>
      <tr>
         <th class="col-md-2">Rule Variable</th>
         <th class="col-md-2">Operator</th>
         <th class="col-md-6">Value(s)</th>
         <th class="col-md-1">Action</th>
      </tr>
   </thead>
   <tbody formArrayName="variables" *ngIf="addRuleForm.get('variables').controls.length">
      <tr *ngFor="let variable of addRuleForm.get('variables').controls; let i=index" [formGroup]="variable">
      <td>{{ addRuleForm.controls.variables.controls[i].controls.name.value }}
         <input type="hidden" formControlName="id" value="addRuleForm.controls.variables.controls[i].controls.id.value" [attr.id]="'id'+i">
      </td>
      <td>
         <select class="form-control input-sm" formControlName="operator" [attr.id]="'operator'+i">
            <option value="">Select an Operator</option>
            <option *ngFor="let o of fetchVariableData('operators') | values" value="{{ o.name }}">{{ o.name }}</option>
         </select>
      </td>
      <td>
         <!-- Text Input -->
         <input type="text" class="form-control input-sm" placeholder="{{fetchVariableData('core').placeholder}}" *ngIf="fetchVariableData('core').inputType == 'text'"
            formControlName="values">
         <!-- Text Input -->
         <!-- Single & Multiple Select -->
         <select class="form-control input-sm" *ngIf="fetchVariableData('core').inputType == 'single' || fetchVariableData('core').inputType == 'multiple'" formControlName="values">
            <option value="">{{ fetchVariableData('core').placeholder }}</option>
            <option *ngFor="let val of fetchVariableData('availableValues') | values" value="{{ val.name }}">{{ val.name }}</option>
         </select>
         <!-- Single & Multiple Select -->
      </td>
      <td>
         <button type="button" class="btn btn-danger btn-sm" (click)="removeVariable(v.id)"><i class="fa fa-trash-o"></i>
         </button>
      </td>
      </tr>
   </tbody>
</table>

如何防止我的表单被覆盖，只显示我页面上的新控件？