1 view

Submitting form with class binding in Angular

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

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" required #nameField="ngModel"
          [class.field-error]="form.submitted && nameField.invalid"/>
    </div>
	<button class="btn btn-primary">Send</button>
</form>

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

import { NgForm, NgModel } from '@angular/forms';  
onSubmit(form: NgForm){
    console.log('in onSubmmit: ', form.valid);       
  }

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

.field-error{
    border: 1px solid red;
}

Leave a Reply