A brief about Reactive Forms in Angular 11

Reactive forms

A model-driven method for processing form inputs whose values change over time is provided by reactive forms. This tutorial demonstrates the creation and updating of a simple form control, how to use several controls in a group and how to validate form values.

Introduction to reactive forms

Reactive forms manage a form's state at a certain point in time using an explicit and immutable method. The model is kept intact between changes since each change to the form state results in a new state. Form inputs and values are presented as streams of input values that can be retrieved synchronously in reactive forms, which are designed on observable streams.

Create dynamic forms with the ability to add or delete controls as needed.

Reactive forms also give you the assurance that your data is consistent and predictable when requested, which makes testing simple. Any stream consumer has access to safely manipulate that data.

There are key differences between reactive forms and template-driven forms. In addition to immutability with observable operators and change tracking through observable streams, reactive forms offer synchronous access to the data model.

Although less explicit than reactive forms, template-driven forms allow direct access to modify data in your template. They do this by relying on directives encoded in the template and mutable data to track changes asynchronously.

Validating data entered into forms with templates

The same validation elements as for native HTML form validation are added to a template-driven form to add validation to it. To match these properties with validator methods in the framework, Angular employs directives.

A list of validation errors, which results in an INVALID status, or null, which results in a VALID status, are generated by Angular every time the value of a form control changes.

<input type="text" id="name" name="name" class="form-control" required minlength="4" appForbiddenName="bob" [(ngModel)]="hero.name #name="ngModel">

<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert">

   <div *ngIf=" name.errors?.['required']">

    A name is required.

   </div>

   <div *ngIf=" name.errors?.['minlength']">

    The name must be at least 4 characters long.

   </div>

   <div *ngIf=" name.errors?.['forbidden name']">

   The name cannot be Bob.

   </div>

</div>