The complete book on angular 11 - Chapter 5 Built-in Directives

 The complete book on angular 11 - Chapter 5 Built-in Directives

1.

A FormControl represents a single input field - it is the smallest unit of an Angular

form.

FormControls encapsulate the field’s value, and states such as being valid, dirty

(changed), or has errors.

2.

the FormsModule gives us template driven directives such as:

• ngModel and

• NgForm

Whereas ReactiveFormsModule gives us reactive driven directives like

formControl and

• ngFormGroup

3.

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">

The #v="thing" syntax says that we want to create a

local variable for this view.

4.

Validaor

<div class="field"

[class.error]="!sku.valid && sku.touched">

 <label for="skuInput">SKU</label>

 <input type="text"

 id="skuInput"

 placeholder="SKU"

 [formControl]="sku">

 <div *ngIf="!sku.valid"

 class="ui error message">SKU is invalid</div>

 <div *ngIf="sku.hasError('required')"

 class="ui error message">SKU is required</div>

 </div>