0

如果在反应形式中删除了该行，我如何能够禁用提交按钮。我很困惑，因为我可以通过编写 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([])
    })
4

4 回答 4

0

伴随着这个

[disabled]="!myForm.valid"

你也可以把

[disabled]="!myForm.valid || myForm.pristine"
于 2017-10-23T14:01:21.680 回答
0

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

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>

希望能帮助到你 ：）

于 2017-10-23T14:08:57.873 回答
0

在每个值发生更改后，您检查您的表单是否有效。如果是您将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>
于 2017-10-23T14:24:39.723 回答
-1

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

编辑 ：

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

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

于 2017-10-23T13:49:57.950 回答