Angular Forms

Angular Forms

This will be used to give the user input in the application, so it will be used to all parent and child components. It will separate into two types

                    1)  Reactive Forms
                    2)  Template Driven Forms

Reactive Forms

This will be used as a model-driven approach to getting the input values from the users and identify the changes in input. This will be easily created and update the user input values. This will be a more predictable model and synchronous data. Easy to modified the data in typescript.

This will be the first step to initialize the values in app-module.

import {formsModule } from '@angular/forms';
@NgModule ({
    declaration: [
         AppComponent
    ],
    imports: [
        FormsModule,
        BrowserModule
     ]
 });
export class AppModule {}

Then add the form control value in typescript and use the value to get the user input. Create a new page and initialize the form control.

import { FormControl } from '@angular/forms';
@Component({
        selector: 'create'
        template: ` <input type = 'text' [fromControl]='value'>`
        styleUrls: [create.css]
})
export class Create {
       public values =  new FormControl();
}

FormControl

This will get the user input values in the form control keyword and persist in the typescript.

FormGroup

This will get the user input from the user and store in the collection of the elements.

FormArray

This will get the same values from the user and store in an array of the elements.

ControlValueAccessor

This will be used as a bridge between the native elements and form controls elements.

FormBuilder

The form builder is used as the instance of creating the form-control, form-group, and form-array.

import  { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component ({
           selector: 'page',
           templateUrl:  ` <form [formGroup] = 'form1' (submit) = 'functionName()'>
                                <input type = 'text' formControlName = 'username' />
                               <input type = 'password' formControlName = 'password' />
                               <button type = 'submit'> submit </button>
                                </form>`
 })
export class Page {
       form1: FormGroup;
        constructor(public formBuilder: FormBuilder) {
                 this.form1 = this.formBuilder.group ({
                            username: ['', validators.required],
                            password: ['', validators.required]
                 });
        } functionname() {}
}

FormArray

This will get the same values from user input and it will be stored as the array of the elements.

import  { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component ({
           selector: 'page',
           templateUrl:  ` <form [formGroup] = 'form1' (submit) = 'functionName()'>
                        <div *ngIf = let f of formData; formArrrayName = 'formData'>       
                                <input type = 'text'  formControlName = 'username' />
                               <input type = 'password'  formControlName = 'password' />
                        </div>
                     
                        <div *ngIf = let f of formData2; formArrrayName = 'formData2'>       
                                <input type = 'text'   formControlName = 'name' />
                               <input type = 'number'   formControlName = 'age' />
                        </div>
                               <button type = 'submit'> submit </button>
                                </form>`
 })
export class Page {
       form1: FormGroup;
        constructor(public formBuilder: FormBuilder) {
                 this.form1 = this.formBuilder.group ({
                            formData = this.formBuilder.array ([
                                  username: ['', validators.required],
                                 password: ['', validators.required]
                            ]),
                            formData2 = this.formBuilder.array ([
                                  name: ['', validators.required],
                                 age: ['', validators.required]
                            ]),
                 });
        }
        functionname() {
                        check the validation and push the code to the backend
         }
}