Angular - disable send button when form is invalid

Question

Hello I have this form:

<form (ngSubmit)="create()" #form="ngForm">
<input type="text" id="name" class="form-control" [(ngModel)]="data.name"
 [ngModelOptions]="{standalone: true}" #name="ngModel" required>
<p *ngIf="name.invalid && (name.dirty || name.touched) && 
 name.errors.required" class="text-danger">Error</p>

<button type="submit" class="btn btn-primary btn-block btn-flat" 
  [disabled]="form.invalid">Send</button>
</form>

And I have a problem with validations. Validation is ok on input, but button is still enabled. I would like to disable button when input is empty. How to disable button when form is invalid? Thanks

Martin Parenteau · Accepted Answer · 2018-09-29 14:22:22Z

1

In order for the input element to be considered in the form validation, you should remove the standalone option and give a name attribute to the element:

<input type="text" name="nameInput" [(ngModel)]="data.name" #name="ngModel" required ...>

See this stackblitz for a demo.

Here is a description of the standalone option given in the Angular documentation:

standalone: Defaults to false. If this is set to true, the ngModel will not register itself with its parent form, and will act as if it's not in the form.

answered Sep 29, 2018 at 14:22

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - disable send button when form is invalid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related