concept form control in category angular

This is an excerpt from Manning's book Angular Development with Typescript, Second Edition. Login to get full access to this book.

The mat-form-field components and the mat-select dropdown should occupy the entire width of the search component. You also want to add more space between the form controls.

Listing 10.11. Adding validators to a form control

let city = new FormControl('New York',              #1
                 [Validators.required,              #2
                  Validators.minLength(2)]);        #3

If you run this app, the browser shows an empty input field and the message “SSN is invalid,” but the user didn’t have the chance to enter any value. Before showing a validation error message, always check whether the form control is dirty (has been modified). The <span> element should look like the following listing.

This is an excerpt from Manning's book Angular in Action. Login to get full access to this book.

Table 9.1 Form control validation properties

Property	Meaning
valid	The form control is valid for all validations.
invalid	The form control has at least one invalid validation.
disabled	The form control is disabled and can’t be interacted with.
enabled	The form control is enabled and can be clicked or edited.
errors	An object that either contains keys with validations that are invalid, or null when all are valid.
pristine	The form control has not yet been changed by the user.
dirty	The form control has been changed by the user.
touched	The form control has been in focus, and then focus has left the field.
untouched	The form control has not been in focus.

The MdError element is from the Material Design library and shows a little validation error when the NgIf is true. For example, *ngIf="email.touched && email.invalid" will show the error when the form control is invalid, and the user has left focus on that field. (As a side note, if the value was loaded from a database but was invalid, the preceding validation would fail, so you should consider the needs of your application.) This is nice because the error doesn’t appear immediately, but only when the user tries to leave the field with an invalid value. You can use different combinations of the properties in table 9.1 to determine when to show a validation error. When you’re creating a new item, all the required fields will be invalid, but it won’t show validation errors until the user has tried to edit them.

There’s a bit of juggling of the form control in this custom validation process, but when you look at these two files together, it should be clearer how they relate to one another. To implement this new validator directive, we need to update our phone form control, as you see in the following listing.

Listing 9.5 Updated phone form control

<md-input-container>
  <input name="phone" mdInput type="tel" placeholder="Phone" [(ngModel)]="customer.phone" required phone #phone="ngModel">      #A
<md-error *ngIf="phone.touched && phone.errors?.phone">      #B
Not a valid phone number
  </md-error>
</md-input-container>

The form control removes the minlength attribute and replaces it with the phone attribute. This makes the form control now aware of the phone validation, and when the number isn’t a correct phone number we can tell by looking at the errors.phone property. Recall our validator function returns an object with {phone: true}, so this is where we see it returned to us. We also removed the additional error message for it being required, as our new validation covers that scenario as well.