The forms are building blocks of any web and
mobile applications and Angular 5 and 4 provides us two approaches for
developing apps(Angular forms) -
The
CSS classes for Angular Control –
Just like AngularJs 1.x, Angular automatically shiners
many control properties onto the form control element as CSS classes. These
Angular classes look like –
1) .ng-valid
2) .ng-invalid
3) .ng-pending
4) .ng-pristine
5) .ng-dirty
6) .ng-untouched
7) .ng-touched
The
example looks like –
.ng-valid[required],
.ng-valid.required
{
font-size: 16px;
text-align: center;
border-left: 10px
solid rgb(218,
200, 43);
/* yellow */
}
.ng-invalid:not(form) {
font-size: 16px;
text-align: center;
border-left: 10px
solid #e94646;
/* red */
}
In the above example, the “ng-valid” and “ng-invalid”
classes is used to set the fonts size, color and align of each form control's.
In
the HTML page looks like –
//The .ng-valid[required] rule is
valid for
<input
class="ng-valid"
required>
//The .ng-valid.required rule is
valid for
<input
class="ng-valid
required">
//Both rules are valid for
<input
class="ng-valid
required" required>
Reference – https://angular.io/guide/form-validation
I hope you are
enjoying with this post! Please share with you friends. Thank you!!