Document the ability to dynamically disable the dialog submit
authorAlexander Ebert <ebert@woltlab.com>
Fri, 14 Oct 2022 16:29:40 +0000 (18:29 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Fri, 14 Oct 2022 16:29:40 +0000 (18:29 +0200)
See WoltLab/WCF#5044

docs/javascript/components_dialog.md

index 774f4b8d3dcd4575ba4472f8375fc59bca2c4794..3dd85bb5a9a38cbccf3428e7b53f11a37d923fea 100644 (file)
@@ -10,10 +10,10 @@ WoltLab Suite 6.0 ships with four different types of dialogs.
 There are four different types of dialogs that each fulfill their own specialized role and that provide built-in features to make the development much easier.
 Please see the following list to make a quick decision of what kind of dialog you need.
 
-* Is this some kind of error message? Use an alert dialog.
-* Are you asking the user to confirm an action? Use a [confirmation dialog](components_confirmation.md).
-* Does the dialog contain form inputs that the user must fill in? Use a prompt dialog.
-* Do you want to present information to the user without requiring any action? Use a dialog without controls.
+- Is this some kind of error message? Use an alert dialog.
+- Are you asking the user to confirm an action? Use a [confirmation dialog](components_confirmation.md).
+- Does the dialog contain form inputs that the user must fill in? Use a prompt dialog.
+- Do you want to present information to the user without requiring any action? Use a dialog without controls.
 
 ## Dialogs Without Controls
 
@@ -176,6 +176,20 @@ dialog.content.append(p);
 const input = dialog.content.querySelector('input[type="text"]');
 ```
 
+### Disabling the Submit Button of a Dialog
+
+You can prevent the dialog submission until a condition is met, allowing you to dynamically enable or disable the button at will.
+
+```ts
+dialog.incomplete = false;
+
+const checkbox = dialog.content.querySelector('input[type="checkbox"]')!;
+checkbox.addEventListener("change", () => {
+  // Block the dialog submission unless the checkbox is checked.
+  dialog.incomplete = !checkbox.checked;
+});
+```
+
 ### Managing an Instance of a Dialog
 
 The old API for dialogs implicitly kept track of the instance by binding it to the `this` parameter as seen in calls like `UiDialog.open(this);`.