CODEWITHSUNDEEP
javascriptangular
jackson john
jackson john

Reputation: 13

Form group validation is not working with custom created components

I have components which having some dropdown. Once the dropdown is get selected a custom component is loaded and which contains a textbox. For example, there is 3 controls on one page and the 4th textbox is get loaded form a separate component once the user selects a specific option from the dropdown.

How I disable my submit button if a 4th textbox is empty.

following is the HTML code for Custom component

<input class="form-control" type="text" value="" 
     [(ngModel)]="configurationData.sno" name="sno" required>

Upvotes: 1

Views: 240

Answers (1)

NickMcB
NickMcB

Reputation: 917

To disable a button you could use Angular attribute binding and pass a variable which holds the form valid state, as such:

<button [disabled]="!ValidForm">Click</button>

If the form is valid don't disable, if the form is invalid then add disable property to the button

Or using your input component we can pass the ngModel for that input, if the input is empty it will return an empty string which evaluates as false, if there is a value then it will evaluate as true:

<button [disabled]="!configurationData.sno">Click</button>

We use the '!' before your ngModel variable because we want to variable to turn off disabled property for 'false' or empty string.

Upvotes: 1

Related Questions