# Reactive Forms

## What Are Reactive Forms?

Reactive forms use a model driven approach to handling form inputs.  It uses an explicit and immutable approach where each form change returns a new state.  They are built around observable streams where the form inputs and values are provided as streams and gives synchronous access to values.

## Reactive Forms Architecture 

* FormGroup - represents the form
  * value - property returns all values in the form
  * valid, invalid, touched, dirty - properties to determine the state of the form
  * controls - returns the list of controls in the form
* FormControl - represents an element in a form
  * value - property returns the value of the control
  * valid, invalid, touched, dirty - properties to determine the state of the control

## Reactive Forms Module

Reactive Forms and its related directives (FormGroup, FormControl) depends on the ReactiveFormsModule.

{% code title="app.module.ts" %}

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ProfileEditorComponent } from './profile-editor/profile-editor.component';

@NgModule({
  declarations: [AppComponent, ProfileEditorComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}app.module.ts
```

{% endcode %}

## Creating a Reactive Form

```
ng g c profileEditor
```

{% code title="profile-editor.component.html" %}

```markup
<label>
  First Name:
  <input type="text" [formControl]="firstName">
</label>

<p>
  Value: {{ firstName?.value }}
</p>

<p>
  <button (click)="updateName()">Update Name</button>
</p>

<p>
  Form Control: {{ firstName | json }}
</p>
```

{% endcode %}

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-10?file=src%2Fapp%2Fprofile-editor%2Fprofile-editor.component.ts&view=editor>" %}

## Creating a FormGroup

We see that we can add the FormControl directive to an element, see the validation state change, and update the value.  In part 2, we are going to create a FormGroup and expand on our Reactive Form.

{% code title="profile-editor.component.html" %}

```markup
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>
```

{% endcode %}

{% hint style="info" %}
Notice we are passing an empty string to the FormControl.  This is a default value to set the control with.
{% endhint %}

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-10dot1?file=src%2Fapp%2Fprofile-editor%2Fprofile-editor.component.ts&view=editor>" %}

{% hint style="info" %}
\[FormControl] vs formControlName - `[formControl]` assigns a reference to the `FormControl`instance in the component.

`formControlName` assigns a string for the FormGroup to look up the control by name.
{% endhint %}

{% hint style="warning" %}
Validation?  Notice that the submit button will be disabled if the form isn't valid.  We haven't assigned any validators, so it's always valid.  We will assign validators in the next step.
{% endhint %}

## Adding Validators

FormGroup and FormControls make it easy to bind our data to our forms, but we will want to be able to validate that the data conforms to our business rules.  In this step, we are going to add validators to our FormGroup.  Angular has a few built-in validators:

* required - a value is required
* minLength - requires a minimum length
* maxLength - sets a maximum length
* pattern - apply a reg expression to determine if field is value
* min - sets a minimum value allowed (number)
* max - sets a maximum value allowed (number)

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-10dot2?file=src%2Fapp%2Fprofile-editor%2Fprofile-editor.component.ts&view=editor>" %}

{% hint style="info" %}
FormBuilder - Notice that we are injecting FormBuilder on the constructor?  This utility makes it easier to create FormGroups and FormControls.  The key/value notation allows us to set the default value and then one or more validators.
{% endhint %}

{% code title="profile-editor.component.html" %}

```markup
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>
  <div class="error" *ngIf="showValidation && profileForm.controls.firstName.invalid">Firstname is required.</div>
  <br>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>
  <div class="error" *ngIf="showValidation && profileForm.controls.lastName.invalid">Lastname is required.</div>
  <br>

  <button type="submit">Submit</button>

  <p [ngClass]="{'error' : !profileForm.valid}">{{validationMessage}}</p>
</form>
```

{% endcode %}

The validation is improved by using a local showValidation variable that doesn't get activated until the submit button has been clicked.  Now our form can be submitted, even if not valid, and we can get the user immediate feedback on what is wrong.

## Nesting FormGroups

In some scenarios, we will want to be able to group our validation into logical groups.  FormGroups support nesting FormGroups and FormControls to create more complex forms.

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-10dot3?file=src%2Fapp%2Fprofile-editor%2Fprofile-editor.component.ts&view=editor>" %}

{% code title="profile-editor.component.html" %}

```markup
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>
  <div class="error" *ngIf="showValidation && profileForm.controls.firstName.invalid">Firstname is required.</div>
  <br>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>
  <div class="error" *ngIf="showValidation && profileForm.controls.lastName.invalid">Lastname is required.</div>
  <br>

  <div formGroupName="address">
    <h3>Address</h3>

    <label>
      Address 1:
      <input type="text" formControlName="address1">
    </label>
    <div class="error" *ngIf="showValidation && profileForm.controls.address.controls.address1.invalid">Address 1 is required and must be at least 5 characters long.</div>
    <br>

    <label>
      City:
      <input type="text" formControlName="city">
    </label>
    <div class="error" *ngIf="showValidation && profileForm.controls.address.controls.city.invalid">City is required.</div>
    <br>

    <label>
      State:
      <input type="text" formControlName="state">
    </label>
    <div class="error" *ngIf="showValidation && profileForm.controls.address.controls.state.invalid">State is required.</div>
    <br>

    <label>
      Zip Code:
      <input type="text" formControlName="zip">
    </label>
    <div class="error" *ngIf="showValidation && profileForm.controls.address.controls.zip.invalid">Zip is required.</div>
    <br>
  </div>

  <button type="submit">Submit</button>

  <p [ngClass]="{'error' : !profileForm.valid}">{{validationMessage}}</p>
</form>

```

{% endcode %}

## Updating Form Values

Sometimes we will want to update the values on our FormGroup with new values.  FormGroup has a couple of methods to do so:

* setValues - sets all values in one shot
* patchValues - updates only the fields provided
* setValue - updates a single value

{% hint style="info" %}
When passing data to a child form component via an input attribute, the FormGroup will be created before the input gets the data.  Simply use patchValues within the ngOnChanges lifecycle hook to set the form with the values.

`ngOnChanges(changes: SimpleChanges) {`

&#x20; `if (changes.data.currentValue) {`

&#x20;   `this.myForm.patchValues(data);`

&#x20; `}`

`}`
{% endhint %}

## Creating a Custom Validator

Custom validators are easy to write and reuse in out applications.  These validators can encapsulate complex validation rules.

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-10dot3?file=src%2Fapp%2Fprofile-editor%2Faddress.validators.ts&view=editor>" %}

## Summary

* What are Reactive Forms?
* Overall architecture
* Adding ReactiveFormsModule
* Creating simple ReactiveForms
* FormGroup, FormControl, and FormBuilder
* Adding validators and creating custom validators
* Updating form values


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://briebug.gitbook.io/angular-fundamentals/reactive-forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.