Reactive forms in angular

This is going to be a short introduction to how we can handle form logic using angular reactive forms.

The requirement is like we are going to have 3 fields (Name, Email, Password) and on submitting it will send the user data through an API, mostly we will not concentrate on the send data part.

so in Angular, we have a class called FormControl according to Angular it Tracks the value and validation status of an individual form control. There are around 20-30 controls we have in this class you can check all of them by this link

step-1: Declare Reactive forms in the module file in the imports section.

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

Step-2:Take form controls classes which we want to use in the form.

  name: FormControl = new FormControl("", Validators.required);
  email: FormControl = new FormControl("", [
    Validators.required,
    Validators.email
  ]);
  password: FormControl = new FormControl("", Validators.required);

at the name field, as we don't want any value to be in the name field so we are not assigning any value to it and this field is required. The same goes for the others.

step-3: Declare these above form controls in the HTML.

    <form>
        <div class="form_group">
            <label for="name">Name</label>
            <input [formControl]="name" type="text" id="name">
    </div>
           <div class="form_group">
            <label for="email">email</label>
            <input [formControl]="email" type="email" id="email">
    </div>
            <div class="form_group">
                <label for="password">password</label>
                <input [formControl]="password" type="password" id="password">
    </div>
    </form>

[formControl]="name" indicates that we are binding a form control to the input element.

yes! Here we have a functional Angular reactive form

WAIT! but for most of the time, we are not going to have only 3 inputs. In requirement, we may have 6 or 8 to 10 fields if we take the example of an address field.

In this case, we have to take 8 to 10 from controls and need to maintain their validations, state, and a lot more. It's doable but it will become a bit clumsy.

In Angular, we have a class called FormGroup. According to the documentations FromGroup Tracks the value and validity state of a group of FormControl instances.

  form: FormGroup = new FormGroup({
    name: new FormControl("", Validators.required),
    email: new FormControl("", [Validators.required, Validators.email]),
    phone: new FormControl("", Validators.required)
  });

Inside the form group, we need to declare FormControls and their state and validation.

    <form [formGroup]="form">
        <div class="form_group">
            <label for="name">Name</label>
            <input formControlName="name" type="text" id="name">
    </div>
            <div class="form_group">
                <label for="email">email</label>
                <input formControlName="email" type="email" id="email">
    </div>
                <div class="form_group">
                    <label for="password">password</label>
                    <input formControlName="password" type="password" id="password">
    </div>
    </form>

we need to declare like this formControlName="password" in the input element.