javascript - 如何以角度启用佐罗模式中的保存按钮

Question

TS

  generateForm() {
    const passwordForm = {
      password: [null, [Validators.required, Validators.minLength(8)]],
      newPassword: [null, [Validators.required, Validators.minLength(8)]]
    };

    if (this.user) {
      passwordForm['username'] = [this.user];
    } else {
      passwordForm['old'] = [null, [Validators.required]];
    }

    return this.formBuilder.group(passwordForm);
  }

generateContainer() {
    const _this = this;

    this.modalRef = this.modalService.create({
      nzTitle: this.translate.instant('Change Password'),
      nzContent: this.modalForm,
      nzOkText: 'Save',
      nzOkDisabled: !this.formGroup.valid,
      nzOnOk: () => {
        _this.returnPassword(true);
        _this.modalRef.destroy();
      },
      nzOnCancel: () => {
        _this.returnPassword(false);
        _this.formGroup.reset();
        _this.modalRef.destroy();
      }
    });
  }

HTML

<ng-template #modalForm>
  <form nz-form [formGroup]="formGroup">
    <ng-container *ngIf="!user" [ngTemplateOutlet]="currentUser"></ng-container>
    <ng-template #currentUser>
      <nz-form-item>
        <nz-form-label nzFor="old">
          <span translate>Old Password</span>
        </nz-form-label>
        <nz-form-control>
          <input nz-input name="old" type="password" id="old" autocomplete formControlName="old"
            [placeholder]="'Enter Old Password' | translate" />
          <nz-form-explain *ngIf="formGroup.get('old')?.dirty && formGroup.get('old')?.errors">
            <span translate>Old password is required!</span>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </ng-template>

    <nz-form-item>
      <nz-form-label nzFor="password">
        <span translate>New Password</span>
      </nz-form-label>
      <nz-form-control>
        <input nz-input name="password" type="password" id="password" autocomplete formControlName="password"
          [placeholder]="'Enter New Password' | translate" />
        <nz-form-explain *ngIf="formGroup.get('password')?.dirty && formGroup.get('password')?.errors">
          <span translate *ngIf="formGroup.get('password')?.value.length === 0">Password is required!</span>
          <span translate *ngIf="formGroup.get('password')?.value.length > 0">Minimum of 8 characters!</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="newPassword">
        <span translate>Confirm New Password</span>
      </nz-form-label>
      <nz-form-control>
        <input nz-input name="newPassword" type="password" id="newPassword"
          [placeholder]="'Confirm New Password' | translate" formControlName="newPassword" autocomplete />
        <nz-form-explain *ngIf="
              (formGroup.get('newPassword')?.dirty && formGroup.get('newPassword')?.errors) ||
              (formGroup.get('password')?.valid &&
                formGroup.get('password')?.value !== formGroup.get('newPassword')?.value)
            ">
          <span translate>Password did not match!</span>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</ng-template>

我在这里要做的是启用保存按钮。但是当我运行应用程序并填写所有字段时，它没有启用保存按钮，它仍然被禁用。新密码和确认新密码匹配。按钮仍然被禁用。

填写完所有字段后如何启用保存按钮？

标签： javascriptangulartypescript