Skip to content

Instantly share code, notes, and snippets.

@wpflames
Created June 27, 2022 15:29
Show Gist options
  • Select an option

  • Save wpflames/afb7e748b38971e5ba7c5bbadec409db to your computer and use it in GitHub Desktop.

Select an option

Save wpflames/afb7e748b38971e5ba7c5bbadec409db to your computer and use it in GitHub Desktop.
Disable submit button
<h2>Leave a comment</h2>
<form #f="ngForm" (ngSubmit)="submit(f)">
<div ngModelGroup="contact" #contact="ngModelGroup">
<div *ngIf="!contact.valid">...</div>
<div class="form-group">
<label for="firstName">First Name</label>
<input
required
minlength="3"
maxlength="10"
ngModel
name="firstName"
#firstName="ngModel"
(change)="log(firstName)"
type="text"
id="firstName"
class="form-control">
<div *ngIf="firstName.touched && !firstName.valid"
class="alert alert-danger mt-3">
<div *ngIf="firstName.errors.required">
First Name is required
</div>
<div *ngIf="firstName.errors.minlength">
First Name must be more than {{ firstName.errors.minlength.requiredLength }} characters
</div>
<div *ngIf="firstName.errors.maxlength">
First Name must be less than 10 character
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="comment">Comment</label>
<textarea
ngModel
name="comment"
id="comment"
cols="30"
rows="10"
class="form-control">
</textarea>
</div>
<button
[disabled]="!f.valid"
class="btn btn-dark">Submit
</button>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment