ANGULAR4 form-Template form

Today we continue to learn the content of the Angular4 form, which is an integral part of the system, so the form module is provided in the angular, and the contents of the form are divided into the following sections: Template form template Form Validation Response form Response Form validation So we are also through a small demo to step by step to complete the four parts of the study. (i) Preparation of a new project ng new Angular-form-demo (ii) Template form first create a new component Ng G component Form/template-form then first write out the form code as we originally did: < form action= "">
< Div> User name: < input type= "Text" name= "username"/></ Div>
< Div> Password: < input type= "Text" name= "Password"/></ Div>
< Div> Confirm Password: < input type= "Text" name= "Confirmpass"/></ Div>
< Div> Tel: < input type= "Text" name= "mobile"/></ Div>
< Div>< input type= "Submit" value= " Submit "/></ Div> </ form> angular defines some instructions to use on the form, to get the form field in the background, we have to mark it with a specific instruction, such as the following using the form after Ng Template-form.
< form #myForm = "Ngform" (ngsubmit) = " OnSubmit ( MyForm . Value) ">
< Div> User name: < input Ngmodel type= "Text" name= "username"/></ Div>
< Div ngmodelgroup= "Passwordgroup">
< Div> Password: < input Ngmodel type= "Password" name= "Password"/></ Div>
< Div> Confirm Password: < input Ngmodel type= "Password" name= "Confirmpass"/></ Div>
</ Div>
< Div> Tel: < input Ngmodel type= "Text" name= "mobile"/></ Div>
< Div>< input type= "Submit" value= " Submit "/></ Div> </ form>
Notice:you should import the Formmodules in config files if you have a error like below:there isn't no directive with "ex Portas "set to" Ngform "#myForm是模板变量, MyForm variables can be customized, but if it is a form file, #myForm后面的值 ' Ngform ' is fixed.
' Template-form.component.ts ' can receive the data from front,
OnSubmit (value) {
Console. log (value); }
The result:
(iii) Validation of template forms in the form, some fields are required, some fields are limited in length, and some fields require a specific rule (such as Password and Confirm password box to be the same), in response to the above recurring phenomenon, we are speaking about how to achieve in angular: ① required Add the Required property to the field, and if the form is empty, you need to be prompted to do the following:
< Div class= "Form-control">
< label for= "username"> User name: </ label>
< input [(ngmodel)] = " Model . name "  type= "Text" name= "username" id= "username" Required #uname = "Ngmodel"/>
< Div [Hidden] = ' uname . valid  ||  uname . Pristine '>
UserName is required!
</ Div> </ Div>
In the above code uname is a template variable that binds him to the Ngmodel so that all classname states of the input are added to the angular. The status code information for the angular CSS is attached below:

The above hidden field indicates that the dictionary is valid or that the field value has not changed to hide the change prompt, after all, we also want to provide a good user experience.
In addition to the previous approach, we can use the *ngif instruction to achieve the above effect, the code looks like this:
< Div class= "Form-control">
< label for= "username"> User name: </ label>
< input [(ngmodel)] = " Model . name "  type= "Text" name= "username" id= "username" Required #uname = "Ngmodel"/>
< Div *ngif= " uname . Invalid && ( uname . touched  ||  uname . Dirty )">
< Div *ngif= " uname . Errors. Required ">
Username is required yet.
</ Div>
</ Div> </ Div>
There is another way to do this without having to bind each field to Ngmodel:
< Div class= "Form-control"> < label for= "username"> User name: </ label> < input Ngmodel type= "Text" name= the user