Question

在我的应用程序中，我具有保存和更新按钮。我使用的是反应式表单，如果未填写验证者字段，那么将禁用保存按钮，并在所有验证者字段都填写完毕后启用。但是在使用更新按钮的情况下，由于所有验证器字段均已填写，因此它将始终显示启用状态。现在，单击“编辑”时，我希望禁用“更新”按钮，如果我在编辑模式下编辑该字段中的任何一个，则必须启用“更新”按钮，前提是所有验证器字段均已填写。

HTML：

 <div class="col-sm-12 col-xs-12 emr-labels no-padd" [formGroup]="emrPatientdetailsForm">
          <div class="col-sm-12 no-padd">
            <div class="col-sm-4  pull-left m-b10 m-t10">
              <label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">MiddleName</label>
              <div class="col-sm-7 pull-left no-padd" >
                <div class="input-group g-brd-primary--focus">
                  <input class="form-control form-control-md rounded-0 pr-0" type="text" maxlength="50" placeholder="MiddleName" formControlName="MiddleName">
                </div>
              </div>
            </div>
            <div class="col-sm-4 pull-left m-b10 m-t10">
              <label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">
                LastName
                <span class="required">*</span>
              </label>
              <div class="col-sm-7 pull-left no-padd" >
                <div class="input-group g-brd-primary--focus">
                  <input class="form-control form-control-md rounded-0 pr-0" type="text" maxlength="50" placeholder="LastName" formControlName="LastName">
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12 text-right m-b10 inline-block">
            <button class="btn btn-primary clr-white m-b10" [disabled]="!emrPatientdetailsForm.valid" (click)="!patientId ? saveEmrPatient() : updateEmrPatient()">{{!patientId ? 'Save' : 'Update'}}</button>
          </div>
        </div>

TS：

 public patientFormInit() {
    //Add
    this.PatientForm = this.FB.group({
      MiddleName: null,
      LastName: [null, Validators.required],
    });
  }

  public updateEmrPatient() {
    let updateParams = this.PatientForm.value;
    this.emrService.updateEmrPatientBasicInfo(updateParams).subscribe(res => {
      this.successMessagePopup(res);
    })
  }
private getPateintBasicInfo() {
    let params = { 'Id': this.userId }
    this.emrService.PatientBasicInfo(params).subscribe(pateintBasicInfoLists => {
      this.listPatientInfo = pateintBasicInfoLists.Body.Data[0];
      this.patientId = pateintBasicInfoLists.Body.Data[0][0].Id;
      let res = pateintBasicInfoLists.Body.Data[0][0];
      this.PatientForm.patchValue({
        Id: res.Id,
        FirstName: res.FirstName,
        MiddleName: res.MiddleName,
        LastName: res.LastName,
      });
    })
  }

Answer 1

使用！form.touched检查是否已编辑表单：

<button class="btn btn-primary clr-white m-b10" [disabled]="!emrPatientdetailsForm.valid && !emrPatientdetailsForm.touched" (click)="!patientId ? saveEmrPatient() : updateEmrPatient()">{{!patientId ? 'Save' : 'Update'}}</button>

Answer 2

检查表单的脏标志。

[disabled]="!emrPatientdetailsForm.valid || !emrPatientdetailsForm.dirty"

这只会返回false，因此如果更改了表单值，则启用按钮。

如何禁用更新按钮，当使用angular2单击编辑时填写了所有必填项时

2 个答案: