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.

disableOnInvalid: true doesn't disable the Submit button

See original GitHub issue

Hi,

I have embedded a formio form in a angular 4 application generated using angular-cli (1.x.x) using angular-formio ( upgraded from ng2-form ) and my form configuration has disableOnInvalid: true but upon rendering the form, the submit button isn’t disabled. Even when invalid fields errors are triggered, the form isn’t being disabled. Let me know if you need more info.

Angular form io version used: 0.13.0

Form component included in html like this:

<formio (submit)="onComplete($event)" [options]="options" [src]="url"></formio>

Here is the form:

{
	"_id": "xxx",
	"machineName": "xxx",
	"modified": "2017-08-22T06:39:13.153Z",
	"title": "Add User",
	"display": "form",
	"name": "addUser",
	"path": "reg",
	"project": "xxx",
	"created": "2017-08-22T02:41:24.987Z",
	"components": [{
		"description": "",
		"properties": {
			"": ""
		},
		"tags": [],
		"type": "textfield",
		"conditional": {
			"eq": "",
			"when": null,
			"show": ""
		},
		"validate": {
			"customPrivate": false,
			"custom": "",
			"pattern": "",
			"maxLength": "",
			"minLength": 2,
			"required": true
		},
		"clearOnHide": true,
		"hidden": false,
		"persistent": true,
		"unique": false,
		"protected": false,
		"defaultValue": "",
		"multiple": false,
		"suffix": "",
		"prefix": "",
		"placeholder": "Enter Firstname...",
		"key": "firstName",
		"label": "First Name:",
		"inputMask": "",
		"inputType": "text",
		"tableView": true,
		"input": true
	}, {
		"properties": {
			"": ""
		},
		"tags": [],
		"type": "textfield",
		"conditional": {
			"eq": "",
			"when": null,
			"show": ""
		},
		"validate": {
			"customPrivate": false,
			"custom": "",
			"pattern": "",
			"maxLength": "",
			"minLength": 2,
			"required": true
		},
		"clearOnHide": true,
		"hidden": false,
		"persistent": true,
		"unique": false,
		"protected": false,
		"defaultValue": "",
		"multiple": false,
		"suffix": "",
		"prefix": "",
		"placeholder": "Enter Last name...",
		"key": "lastName",
		"label": "Last Name",
		"inputMask": "",
		"inputType": "text",
		"tableView": true,
		"input": true
	}, {
		"validate": {
			"required": true
		},
		"properties": {
			"": ""
		},
		"conditional": {
			"eq": "",
			"when": null,
			"show": ""
		},
		"tags": [],
		"type": "email",
		"kickbox": {
			"enabled": false
		},
		"clearOnHide": true,
		"hidden": false,
		"persistent": true,
		"unique": false,
		"protected": false,
		"defaultValue": "",
		"suffix": "",
		"prefix": "",
		"placeholder": "Enter Email Address ...",
		"key": "email",
		"label": "Email Address",
		"inputType": "email",
		"tableView": true,
		"input": true
	}, {
		"validate": {
			"minLength": 8,
			"required": true
		},
		"tabindex": "",
		"properties": {
			"": ""
		},
		"conditional": {
			"eq": "",
			"when": null,
			"show": ""
		},
		"tags": [],
		"source": "xxx",
		"lockKey": true,
		"type": "password",
		"clearOnHide": true,
		"hidden": false,
		"persistent": true,
		"protected": true,
		"suffix": "",
		"prefix": "",
		"placeholder": "Enter password...",
		"key": "password",
		"label": "Password",
		"inputType": "password",
		"tableView": false,
		"input": true
	}, {
		"lockKey": true,
		"properties": {
			"": ""
		},
		"conditional": {
			"eq": "",
			"when": "",
			"show": ""
		},
		"tags": [],
		"type": "button",
		"theme": "primary",
		"disableOnInvalid": true,
		"action": "submit",
		"block": false,
		"rightIcon": "",
		"leftIcon": "",
		"size": "md",
		"key": "submit",
		"tableView": false,
		"label": "Submit",
		"input": true
	}],
	"owner": "xxx",
	"submissionAccess": [{
		"type": "create_all",
		"roles": []
	}, {
		"type": "read_all",
		"roles": []
	}, {
		"type": "update_all",
		"roles": []
	}, {
		"type": "delete_all",
		"roles": []
	}, {
		"type": "create_own",
		"roles": []
	}, {
		"type": "read_own",
		"roles": []
	}, {
		"type": "update_own",
		"roles": []
	}, {
		"type": "delete_own",
		"roles": []
	}, {
		"type": "team_read",
		"roles": []
	}, {
		"type": "team_write",
		"roles": []
	}, {
		"type": "team_admin",
		"roles": []
	}],
	"access": [{
		"type": "create_all",
		"roles": []
	}, {
		"type": "read_all",
		"roles": ["xxx", "xxx", "xxx"]
	}, {
		"type": "update_all",
		"roles": []
	}, {
		"type": "delete_all",
		"roles": []
	}, {
		"type": "create_own",
		"roles": []
	}, {
		"type": "read_own",
		"roles": []
	}, {
		"type": "update_own",
		"roles": []
	}, {
		"type": "delete_own",
		"roles": []
	}, {
		"type": "team_read",
		"roles": []
	}, {
		"type": "team_write",
		"roles": []
	}, {
		"type": "team_admin",
		"roles": []
	}],
	"tags": [],
	"type": "form"
}
` ``

Issue Analytics

State:
Created 6 years ago
Comments:23 (9 by maintainers)

Top GitHub Comments

1reaction

travistcommented, May 28, 2019

That does help… We will take a look.

1reaction

pravin-mamdgecommented, Mar 6, 2019

Hi @travist, we saw this issue after upgrading to the latest version. With the following versions, we don’t see this issue. “angular-formio”: “1.6.4”, “formiojs”: “2.24.5”

Are you planning to schedule this issue in the next release?

Top Results From Across the Web

How to make 'submit' button disabled? - Stack Overflow

As seen in this Angular example, there is a way to disable a button until the whole form is valid: <button type="submit" [disabled]="!...

How to disable the button for invalid form or click in Angular?

First, create an application using Angular CLI, This post does not cover the ... In the button, myForm.invalid returns true if the input...

Disabling the Submit Button when the form is Invalid - YouTube

In this video, I talk about disabling the Submit button on the form when it is invalid.

Submit Button Disabling

The disabled submit button does not use the disabled attribute. Instead it uses aria-disabled="true". Using aria-disabled. Unlike the Cat's Name field which ...

Disable submit button in form untill all required fields are filled?

Try this: In the submit button's "disabled" or "hidden" options, use some code like this... {{ input1.invalid || input2 ...