Validation with the input and select components
Angular provides three different ways of building forms in our applications:
- Template-driven approach: This approach allows us to build forms with very little to no application code required
- Model-driven (or reactive) approach using low-level APIs: In this approach, we create our forms as testable without a DOM being required
- Model-driven with a higher level API: This approach uses a higher level API called
FormBuilder
.
PrimeNG created most of the input and select components with model-driven form support. Because of this, all input and select components are eligible for validation.
Let's take an example of a registration form with firstname
, lastname
, password
, address
, phone
, and gender
fields with validation support. PrimeNG components are backed by a model-driven API with FormBuilder
, which groups all of the form controls to create a registration form, as shown here:
this.registrationform = this.formBuilder.group({ 'firstname': new FormControl...