Is there a simple way to disable ok button in a modal
See original GitHub issueWhat 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:
- Created 4 years ago
- Comments:5 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@krokofant
getInstancewill be unstable when using template mode(if closed), we’ll public theupdateConfigmethod, it works in template mode and service mode.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.
Is this api safe/stable to use?