Angular4 forms come in two types: template forms and reactive forms. Let’s start with a data model: A data model is not just any object, but a data structure used to store form data. Template forms The data model of the form is defined (implicitly created) by the relevant directives on the component template, and because the data model of the form defined in this way is limited by HTML syntax, it is only suitable for simple scenarios. Template forms have three apis: NgForm, ngModel, ngModelGroup (all three apis can be instantiated on templates using template local variables, so they can be passed to the controller) ==> The ngForm directive and the ngModel directive are directly added to the template tag. Ngforms represent the entire form, and Angular automatically adds them to the form tag when the form is created (equivalent to

). It works like this: Once an ngForm is created, Angular implicitly creates an instance of the FormGroup class, and the ngForm looks for the value of the ngModel tag in its child element and adds it to the FormGroup. The form data can then be accessed on the page through the ngForm object. Because ngForm can be referenced using template local variables, it can be passed to the controller using the (ngSubmit) = “XXX (#ngForm)” event. Of course, you don’t have to use ngForms in form forms. You can use them in tags like div, where you need to add directives manually. If you don’t want Angular to receive the form, add the ngNoForm directive. NgModel This directive represents a control within the form. The ngForm looks for the ngModel tag in the form, that is, the tag. Here’s how the tag works: After adding the directive, Angular implicitly creates a FormControl class to store its value. This instruction is added directly to the label 

<input ngModel name="text"> 1Copy the code

But you also need to add the name attribute (because the value of the ngModel flag control is added to the FormGroup, and the FormGroup parameter is an object, which must have a key). Of course, this directive can also use a template local variable, and it can also get its value from that variable

<input #text="ngModel" name="text">1Copy the code

NgModelGroup This directive represents part of the form, which is a collection of ngModels. Used to distinguish particular ngModel controls. It works like ngForm in that it implicitly creates a FormGroup class to store the values of the controls it includes. This is represented as nested in ngForms. However, its use requires assigning a name (to be stored in the ngForm)

Reactive forms When using reactive forms, you write typescript instead of HTML code to create an underlying data model. After the data model is defined, you use specific instructions to connect the TEMPLATE’s HTML code to the data model. So there are two steps to using reactive forms: (1) code to create an underlying data model; (2) Use specific instructions to connect the TEMPLATE HTML code with the data model. Angular/ Forms provides three classes for creating the underlying data model: FormControl, FormGroup, and FormArray

The FormControl class is the basic unit of reactive forms, meaning that each FormControl defines a class.

userName:FormControl=new FormControl("aaa"1)Copy the code

The parameters inside represent the initial value of the control

FormGroup

myForm:FormGroup=new FormGroup({})1Copy the code

This class can be used to represent the entire form or part of the form. The class takes an object as an argument that holds the value of the FormControl included in the class (a set of key:value pairs)

FormArray

partForm:FormArray=new FormArray([])1Copy the code

This class is similar to FormGroup in that it is a collection of controls, but FormArray represents a growable collection of fields, whereas FormGroup represents a fixed collection of fields. Use this class to include multiple emails in a form. The parameter value is an array, so it is usually used with *ngFor

Again, there are two types of form directives: FormGroup – > FormGroup – >formGroupName FormControl – > FormControl – >formControlName FormArray – > NULL – >formArrayName (remember, for attribute names directives must be used in formGroup scope) these directives are used in templates. Start by creating a data model for the FormGroup class that represents the entire form. So add a property binding inside the form tag in the template, i.e

<form [formGroup]="myForm"> 1Copy the code

The FormGroup instance argument — >{} — contains the values of all the controls in the form (i.e., controls for FormControl and FormArray). Then in the form that defines the formGroup property, each control must define its name using the FormGroupName, FormControlName, and FormArrayName directives.

<form [formGroup]="formModel" (submit)="onSubmit()">
    <div formGroupName="dateRange"> Start date :<inputtype="date" formControlName="from"> Expiration date :<inputtype="date" formControlName="to">
    </div>
    <div>
        <ul formArrayName="emails">
            <li *ngFor="let e of this.formModel.get('emails').controls; let i =index;">
                <input type="text" [formControlName]="i"  />
            </li>
        </ul>
        <button type="button" (click)="addEmail()"> add mailbox </button> </div> <div> <buttontype="submit"> submit < / button > < / div > < / form > 1234567891011121314151617Copy the code

Get (‘ emails’) : this.formModel.get(‘ emails’); Use the get () method