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!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|