question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 -->

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
hsuanxyzcommented, Mar 24, 2020

@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.

1reaction
MaoScutcommented, Jul 6, 2019

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to disable the OK button of a modal dialog in jQuery
Write the disable action in your Ok button click event as following "Ok": { click: function () { $(".ui-dialog-buttonpane button:contains('Ok')") ...
Read more >
Removing OK and Cancel buttons from spModal - ServiceNow
I need to disable the OK and the Cancel buttons that appear in the spModal popup window. I think I have found the...
Read more >
Can an OK button do nothing? - UX Stack Exchange
The proper way to handle incomplete input is to show, but disable the Next button whenever the form is in an incomplete state....
Read more >
How do you remove the "Ok" button that pops up in your ...
The OK button appears because you are creating a modal window. If you don't want it, don't make the window modal. It's your...
Read more >
Disable the Button in Dialog based application. - CodeProject
If the Configure dialog is a modal dialog, you don't have to worry about the OK button of your settings dialog. While the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found