用逻辑复制表格

用basic很难做到这一点Javascript。下面的方法使用ReactiveForm方法

我们遵循以下步骤

• 将添加ReactiveFormsModule到imports模块的数组

@NgModule({
  imports:[ ReactiveFormsModule, ... ],

• 注入FormBuilder课程

constructor(private fb: FormBuilder) {}

• 定义表格

myForm = this.fb.group({
  totalVal: [100],
  formsArray: this.fb.array([this.fb.control("", { validators: [Validators.required] })]),
  reason: ["", [Validators.required]]
}, { validators: [sumMatches] });

我们添加了一个cusom验证器sumMatches。我们将使用它来检查总和是否匹配

function sumMatches(control): ValidationErrors | undefined {
  const totalVal = Number(control.get("totalVal").value);
  const formsArrayTotal = control
    .get("formsArray")
    .value.reduce((a, b) => Number(a) + Number(b), 0);
  if (formsArrayTotal !== totalVal) {
    return {
      sumMismatch: true
    };
  }
  return;
}

• 接下来，我们定义辅助getter函数以从中提取属性formGroup

  get sumMismatch(): boolean {
    return this.myForm.hasError('sumMismatch')
  }
  get arrayFullyFilled() {
    return !this.formsArray.controls.some(item => item.errors)
  }
  get formsArray() {
    return this.myForm.get("formsArray") as FormArray;
  }
  get totalVal() {
    return this.myForm.get("totalVal") as FormControl;
  }

• 我们还需要修改功能以从formArray添加和删除项目

  DelBtn = delIndex => this.formsArray.controls.splice(delIndex, 1);
  AddBtn = () => this.formsArray.push(this.fb.control(""));

• 最后，我们可以formGroup在html中实现

<h2> Form</h2>

<span class='totalVal'>Total Value:{{ totalVal.value }}</span>

<form [formGroup]='myForm'>
    <ng-container formArrayName='formsArray'>
        <table *ngFor="let item of formsArray.controls; let i = index">
            <tr>
                <td>
                    <div>
                        <label [attr.for]="'fname' + i">Value:</label><br>
                        <input type="number" [formControlName]="i" type="text" [id]="'fname' + i" name="fname" ><br>
                </div>
                </td>
                <td>
                    <button type="button" class="btn btn-outline-success"
        s (click)="DelBtn(i)" ><span class="fa fa-plus"></span>Delete</button></td>
            <tr>

        </table>
    </ng-container>
    <div *ngIf='!sumMismatch && arrayFullyFilled'>
        <label for="fname">Reason:</label><br>
        <input type="text" id="fname" name="fname" ><br>
</div>
        <br>
        <button type="button" class="btn btn-outline-success"
       (click)="AddBtn()"  ><span class="fa fa-plus"></span>Add</button>
        <br>
  <span class="error" *ngIf="sumMismatch && myForm.touched">Total Value Mismatch</span>
</form>

我已经将CSS提取到自己的文件中

.totalVal {
  font-weight: bolder;
  font-family: verdana;
}
.btn-outline-success {
  border-radius: 40px;
  margin-left: 50px;
}
.error {
  color: red;
}

看这个演示

编辑1-验证器如何工作？

为了理解这一点，我们看一下如何构建表单组。我们定义了一个结构，该结构以以下形式产生值

  {
    totalVal: 100,
    formsArray: [''],
    reason: ''
  }

通过将表单组定义为this.fb.group({ ... }, {validators: [ sumMatches ] }具有上述值的表单组，将传递给sumMatches函数

在中，sumMatches我们将拥有一个类似于aformGroup的值

  {
    totalVal: 100,
    formsArray: ['50', '20', '10'],
    reason: ''
  }

在上面的代码中，我们简单地从formGroup使用control.get('totalVal').value相同的提取100 formArray。由于formArrayvalue将是一个数组，因此我们可以使用reduce函数对其求和。.最后，我们对此进行比较，如果匹配则返回null，如果Object不匹配则返回an 。

通过以上方法，角度反应式表格将valid根据用户提供的内容更新表格状态的值。因此，我们可以利用此valid状态来更新UI

arrayFullyFilled（）

get arrayFullyFilled() { 
  return !this.formsArray.controls.some(item => item.errors) 
}

上面的代码尝试查找用户是否已填充数组中的所有输入。在我们的数组中，我们获取所有控件，检查其中一些控件是否有错误，如果有错误，则返回false，否则返回true。考虑到我formGroup在使用验证时已使之formControls成为可能requiredValidators.required