If you are using a template driven form approach, you can try this, the below code block is an example of registration form which take 4 inputs and contains a submit button:
<form #register="ngForm" (ngSubmit)="submitFn(register)">
<div class="form-group">
<label for="first_name">First name: </label><br>
<input #fname="ngModel" type="text" class="form-control" name="first_name" id="f_name" placeholder="Enter firstname..." ngModel>
</div>
<div class="form-group">
<label for="last_name">Last name: </label><br>
<input required type="text" class="form-control" name="last_name" id="l_name" placeholder="Enter lastname..." ngModel>
</div>
<div class="form-group">
<label for="email">Email: </label><br>
<input required type="email" class="form-control" name="email" id="mail_id" placeholder="Enter email..." ngModel>
</div>
<div class="form-group">
<label for="password">Password: </label><br>
<input required type="password" class="form-control" name="password" id="pwd" placeholder="Enter password..." ngModel>
</div>
<button [disabled]="!register.form.valid" type="submit" class="btn btn-primary">Submit</button>
</form>
The main thing you need is a template variable, in my case it is #register="ngForm"
, and you will use it for validating the form at the submit button, by setting its value to disabled attribute like [disabled]="!register.form.valid"
->
Here, the submit btn will be disabled if the expression evaluates to true
, the expression checks that if the form is valid or not, if it is valid then btn will be enabled & vice-versa.
Hope, it helps !
Don't forget to upvote if found helpful.