时间戳

首页 > 解决方案 > 如何禁用更新按钮，当使用angular2单击编辑时填充所有强制填充

angular - 如何禁用更新按钮，当使用angular2单击编辑时填充所有强制填充

问题描述

在我的应用程序中，我有保存和更新按钮。我正在使用响应式表单，如果未填写验证器字段，则禁用保存按钮并在填写所有验证器字段后启用。但是在更新按钮的情况下，由于所有验证器字段都已填充，它显示始终启用。现在单击编辑时，我希望禁用更新按钮，如果我在编辑模式下编辑任何一个字段，则必须启用更新按钮，前提是所有验证器字段均已填写。

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,
      });
    })
  }

标签： angulartypescript

解决方案

使用 !form.touched 检查表单是否被编辑：

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

推荐阅读