Angular 4 form validation is not working

Question

I am new to angular 4 ,Here I am trying to implement angular form validation messages in my application .

Here the validation message is get displayed as expected but the text field and label color is not get changed based on the state.

HTML :

<form #AddressForm="ngForm" (ngSubmit)="SaveAddress(mAddress_Model)">
   <div class="form-group" [class.has-error]="Name.invalid && Name.touched" [class.has-success]="Name.valid">
   <label for="FName" class="control-label" >First Name *</label>
   <input type="text" required minlength="4" id="Name" name="Name" class="form-control "  [(ngModel)]="mAddress_Model.mFName"  #Name="ngModel">
    <div class="help-block alert-danger col-sm-12" *ngIf="Name.errors.required && Name.touched">
                    * First name is required
    </div>
  </div>
</form>

Here **[class.has-error]="Name.invalid && Name.touched" [class.has-success]="Name.valid"** not worked for me but the validation message div is working .

I followed this blog http://csharp-video-tutorials.blogspot.com/2018/01/displaying-angular-form-validation.html

Can anyone help me to solve this .

Have you inspected the DOM using the browsers developer tools? Is the class being applied, or not? — user184994
– user184994, Commented Jul 23, 2018 at 10:50
<div _ngcontent-c1="" class="form-group has-error"> I get this in console @user184994 I think it's not applied — Zhu
– Zhu, Commented Jul 23, 2018 at 10:52
Right, so according to that the has-error class has been added, it sounds like the style hasn't. Are you using Bootstrap? — user184994
– user184994, Commented Jul 23, 2018 at 10:53

Chris K · Accepted Answer · 2018-07-23 10:51:09Z

1

Maybe use this instead?

[ngClass]="hasErros? 'some-class' : 'some-other-class'"

answered Jul 23, 2018 at 10:51

Chris K

9283 gold badges10 silver badges18 bronze badges

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

Comments

Amit Chigadani · Accepted Answer · 2018-07-23 11:48:32Z

0

You can modify your input tag and use [ngClass] attribute to change input tag border line to red or any color and same can be done for text too.

<input [ngClass]="{'decorate-red' : !mAddress_Model.mFName && flag, 'decorate-regular' : mAddress_Model.mFName && !flag}" type="text" required minlength="4" id="Name" name="Name" class="form-control "  [(ngModel)]="mAddress_Model.mFName"  #Name="ngModel">

If there is an error then assign flag value to false else true.

in css add

.decorate-red {
   border: 1px solid red !important;
}

edited Jul 23, 2018 at 11:48

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

answered Jul 23, 2018 at 10:54

T. Shashwat

1,16510 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular 4 form validation is not working

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related