Angular 2 Form validation work for complete form

Question

I create a form and 2 fields are required and this is my validation class

   .ng-invalid {
  border:1px solid #a94442;  
  background:#fafbee;
}

this will not working as should be.

this is my html code

<form #form="ngForm" novalidate>
            <div class="form-horizontal">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Title</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Title" name="Title" #Title>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">First name</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.FirstName" name="FirstName" required #FirstName>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Last name</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.LastName" name="LastName" required #LastName>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Telephone</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Telephone" name="Telephone" #Telephone>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Fax</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [ngModel]="contactObj.Fax" name="Fax" #Fax>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Mobile</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Mobile" name="Mobile" #Mobile>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group ">
                            <label class="col-sm-5 control-label">Email</label>
                            <div class="col-sm-7">
                                <div class="input-group ig-btn">
                                    <input type="text" class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Email" name="Email" #Email>
                                    <span class="input-group-addon">
                                        <button class="btn btn-primary">Send</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Date of birth</label>
                            <div class="col-sm-2">
                                <input type="checkbox" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.DOB" name="DOB" #DOB>

                            </div>
                            <div class="col-sm-5">
                                <select class="form-control">
                                    <option>12/10/1976</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12 coment">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Comment</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" [disabled]="ViewContactDisable" [(ngModel)]="contactObj.Comments" name="Comments" #Comments></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <div class="form-group gap-bottom0">
                            <div class="col-sm-12 text-right">
                                <button class="btn btn-primary" (click)="SaveContact(contactObj,form)" [class.hidden]="ViewContactDisable"> OK</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>

and output look like this

i want only that it will work on 2 specific field not with all form . so please guide me the correct way to do that

Answer 1

you are using .ng-invalid class which is also apply to form when form is invalid. so remove .ng-invalid and use new .invalid class name, see in my example. and use that class to your each control of form, where you want to display invalid border around that form control.

this way you can added border to individual form component.

Template driven form way:

 .invalid {
      border:1px solid #a94442;  
      background:#fafbee;
    }

<input #email="ngModel" name="email" [class.invalid]="!email.valid && email.touched" type="email" ngModel required pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
     {{email.valid}}

another way, you can do like this: this is the Dynamic / Reactive form way.

<div class="form-group" [ngClass]="{'has-error':!complexForm.controls['firstName'].valid && complexForm.controls['firstName'].touched}">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="first Name" [formControl]="complexForm.controls['firstName']">
      </div>

onSubmit check validation

<h1>Employee Form</h1>
<form #myForm="ngForm" (submit)="formSubmit(myForm)" novalidate>
    <div>
        <div>
            <input id="nameInput" type="text" name="name"
                   ngControl="name"
                   required
                   minlength="2"
                   maxlength="35"
                   [(ngModel)]="person.name" />
        </div>
    </div> 
    <div>
      <button type="submit">Submit</button>
    </div>
    <div style="color: red">{{validationMessage}}</div>
</form>

in your Component class

validationMessage: string;

constructor() {

    this.validationMessage = "";
}

formSubmit(myForm: ControlGroup) {
    if (myForm.valid) {
      this.validationMessage = "Form Is Valid";
    }
    else
    {
      this.validationMessage = "Form Is Not Valid";
    }
}