在 Angular 中删除行时禁用保存按钮

Question

如果以反应形式删除行，我如何才能禁用提交按钮。我很困惑，因为我可以通过编写 validators.required 来使用表单来做到这一点，但是如果删除了行，我该如何禁用提交按钮呢？代码如下。

html

<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onCreate()" >
  <div class="card-block" formArrayName="rows">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Material SKU</th>
          <th>Quantity</th>
          <th>Price</th>
          <th>Total</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of myForm.controls.rows.controls; let i = index" [formGroupName]="i">
          <td>
            <select formControlName="material_id" class="col-md-10">
              <option *ngFor="let mat_order of mat_orders" [ngValue]="mat_order.material_id">
                {{ mat_order.sku}} - {{ mat_order.mat_name }} 
              </option>
            </select>
          </td>
          <td><input type="number" class="col-md-6" formControlName="quantity"></td>
          <td><input type="number" class="col-md-6" formControlName="price"></td>
          <td><input type="number" class="col-md-6" formControlName="total"  [ngModel] ="row.get('quantity').value * row.get('price').value"></td>
          <td>
            <button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(i)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button>
          </td>
        </tr>
      </tbody>
    </table>

    <button type="button" class="btn btn-sm btn-primary float-left" (click)="initGroup()"><i class="fa fa-plus-circle" aria-hidden="true"></i>  Add Row</button>
  </div> 
  <button type="submit" class="btn btn-primary float-right" [disabled]="!myForm.valid">Save</button>
</form>

ts

initGroup() {
    let rows = this.myForm.get('rows') as FormArray;
    rows.push(this.fb.group({
      material_id: [null, Validators.required],
      quantity: [null, Validators.required],
      price: [null, Validators.required],
      total: [{value: '', disabled: true}, Validators.required],
    }))
  }




this.myForm = this.fb.group({
      rows: this.fb.array([])
    })

Answer 1

您可以添加（在 html 中）： [disabled]="myForm.invalid" 到您的按钮

编辑：

我以为你会自定义你的条件：我的意思是，您可以在此添加任何您想要的条件，因此您可以添加：[disabled]="myForm.invalid || myForm.controls.rows.controls.length == 0"

您甚至可以为您需要的确切行为创建一个变量：例如，您可以添加到点击事件中： (click)="onDeleteRow(i); deletedRow = true;" 接着： [disabled]="myForm.invalid || myForm.controls.rows.controls.length == 0 || deletedRow"

Answer 2

伴随着这个

[disabled]="!myForm.valid"

你也可以放

[disabled]="!myForm.valid || myForm.pristine"

Answer 3

作为您问题的解决方案，您可以设置一个 boolean 如果您调用 onDeleteRow(i) 方法，它将是 true :

deleted : boolean = false;
onDeleteRow(i){
   this.deleted = true;
  //...
}

在按钮中，您将检查 deleted 是否为 false 以及行是否为空：

  <button type="submit" class="btn btn-primary float-right" [disabled]="!myForm.valid || myForm.controls.rows.length == 0 || deleted ">Save</button>

希望对您有所帮助:)

Answer 4

每次更改值后，您都会检查您的表单是否有效。如果是，您将 saveButton 设置为 true。在您 创建表单后添加此代码:

this.myForm.valueChanges.subscribe((item: any) => {
       // item is changed
       if (this.form.valid) { this.saveButton = true; }
       else { this.saveButton = false; }
});

并且在模板中 [disabled]="saveButton":

<button type="submit" class="btn btn-primary float-right" [disabled]="saveButton">Save</button>

在 Angular 中删除行时禁用保存按钮

Disable Save Button When Row is Deleted in Angular

angular

angular-reactive-forms

angular-forms

angular-validation