Angular 6 for Enterprise-Ready Web Applications

Implementing input validation and error messaging

FormControl is highly customizable. It allows you to set a default initial value, add validators, or listen to changes on blur, change, and submit events, as follows:

examplenew FormControl('Bethesda', { updateOn: 'submit' })

We won't be initializing the FormControl with a value, but we need to implement a validator to disallow one character inputs:

1. Import Validators from @angular/forms:

src/app/city-search/city-search.component.tsimport { FormControl, Validators } from '@angular/forms'

2. Modify FormControl to add a minimum length validator:

src/app/city-search/city-search.component.tssearch = new FormControl('', [Validators.minLength(2)])

3. Modify the template to show a validation error ...