0 views

Styling forms with Validation errors in Angular

Step 1: user-settings-form.component.html file

<form #form="ngForm" ngNativeValidate">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" required #nameField="ngModel"/>
		  <div *ngIf="!nameField.valid &&  nameField.touched"
            class="alert alert-danger">
            Enter a name
          </div>
    </div>
	<button class="btn btn-primary">Send</button>
</form>

Step 2: user-settings-form.component.css file

.ng-invalid:not(form).ng-touched{
    border: 1px solid red;
}

Leave a Reply