ANGULAR4 form-Template form

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.