Is there a simple way to disable ok button in a modal

[MaoScut]

What problem does this feature solve?

disable a ok button is quite common, but it is too exhausted to use nzFooter.

What does the proposed API look like?

currently, if I want to disable a ok button when a formGroup is invalid, the code will be like below.

@Injectable({
  providedIn: 'root',
})
export class MyService {
  tplModal: NzModalRef;
  constructor(
    private modalService: NzModalService,
    private fb: FormBuilder,
    public entityService: EntityService,
  ) {
  }

  perform() {
    const formGroup = this.fb.group({
      name: ['n', Validators.required],
    });
    // declaration 'entityService', 'modal' only for nzFooter[0].onClick!
    const entityService = this.entityService;
    const modal: NzModalRef = this.tplModal = this.modalService.create({
      nzTitle: 'create',
      nzContent: SimpleComponent,
      nzComponentParams: {
        formGroup,
      },
      nzFooter: [{
        type: 'primary',
        label: 'submit',
        disabled: (instance) => instance.formGroup.invalid,
        onClick(instance) {
          return entityService.add(instance.formGroup.value).toPromise().then(
            // manually call destroy!
            () => modal.destroy(),
          );
        },
      }, {
        // config cancel button manually!
      }],
    });
  }
}

but if ModalOptionsForService.nzOkDisabled can accept a function takes contentComponentInstance as arg, the 'perform' method above can be simplify.

  perform() {
    const formGroup = this.fb.group({
      name: ['n', Validators.required],
    });
    this.tplModal = this.modalService.create({
      nzTitle: 'create',
      nzContent: SimpleComponent,
      nzComponentParams: {
        formGroup,
      },
      nzOnOk: (instance) => this.entityService.add(instance.formGroup.value).toPromise(),
      nzOkDisabled: (instance) => instance.formGroup.invalid,
    });
  }
```<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

[MaoScut]

I read the soure code nz-modal.service.ts. The method 'getInstance' of NzModalRef can feat my requirement. But it is not mentioned in the official doc.
use this method, the code becomes as below.

  perform() {
    const formGroup = this.fb.group({
      name: ['n', Validators.required],
    });
    this.tplModal = this.modalService.create({
      nzTitle: 'create',
      nzContent: SimpleComponent,
      nzComponentParams: {
        formGroup,
      },
      nzOnOk: (instance) => this.entityService.add(instance.formGroup.value).toPromise(),
    });
    formGroup.statusChanges.subscribe((state) => {
      this.tplModal.getInstance().nzOkDisabled = state === 'INVALID';
    });
  }

Is this api safe/stable to use?

[krokofant]

The getInstance api does not seem stable to use as it it now removed in the beta 😕

Alternatives might be NzModalRef.updateConfig({})

[vthinkxie]

The getInstance api does not seem stable to use as it it now removed in the beta 😕

Alternatives might be NzModalRef.updateConfig({})

cc @hsuanxyz

[hsuanxyz]

@krokofant getInstance will be unstable when using template mode(if closed), we'll public the updateConfig method, it works in template mode and service mode.

[daiyang123456]

updateConfig

but，it is invalid