Angular form validation directive

Taming Angular forms

The component we created thus far is enough to make the form invalid if submitted, and show the “required” balloon when the field is invalid. Following is other built in validations.

The final result is preferably an unobtrusive one like this:

<input crinput type="number" id="valvet" formControlName="valvet" [min]="3" [required]="true" />

Before we build the new crinput directive, the component itself can be enhanced.

We need to first add a location for the help text, and some new CSS. And a custom error property.

• The error message belongs to our custom component but needs to be flexible and can be overwritten

• The help text belongs to the project, don’t even think about automating it

• From user experience side, I believe stating the rule up front, then keeping the error message short is the best way to fill the form efficiently.

Continue reading on Sekrab Garage

In this article:

• Directive

• The error message property

• Reverse range

• Length

• Pattern

• Email validation

• Custom validation

• Cross form validation

• Form validation

• Issue: Multiple error messages

• Using the directive in other ways

• The best experience

• Form types