angular表单【模板式表单】

模版式表单：其数据模型是通过组件模版中的相关指令来定义，因为受限于HTML的语法，所以只适用于简单的表单场景。

模版式表单指令

指令	隐式创建实例
ngForm	FormGroup
ngModel	FormControl
ngModelGroup	FormGroup

ngForm：这个指令用来代表整个表单，在angular应用里面他会被自动的添加到每一个form标签上，会隐式的创建一个FromGroup类的实例，这个类代表表单的数据模型，并且存储表单的数据，会自动的发现所有标记ngModel的子元素并将其值添加表单的数据模型中。

【1】ngForm指令可以在form标签之外使用比如说在div上

【2】如果不希望angular来自动处理表单，可以添加ngNoForm指令

【【1】】模板使用指令：

<form #myForm="ngForm"  (ngSubmit)="createUser(myForm.value)" > //
    <div>昵称：<input type="text" ngModel name="nickname"/> </div>
    <div>手机：<input type="text" ngModel name="mobile"/> </div>
    <div ngModelGroup="passwordInfo" >
        <div>密码<input ngModel type="text" name="password"/> </div>
        <div>确认密码<input ngModel type="text" name="confirmPassword"/> </div>
    </div>
    <input type="submit" value="提交" />
</form>
 

相关解释：

1. #myForm="ngForm",ngForm指令可以被一个模板本地变量引用，以便在模板中访问ngForm的实例,value属性是个javascript对象， 保存着表单所有字段当前的值

打印出ngForm实例的value属性：

<div>{{myForm.value|json}}</div> 

结果：

{
"nickname": "阿萨斯", 
"mobile": "啥啥啥",
"passwordInfo": 
    { 
    "password": "assassin",
    "confirmPassword": "大叔大婶所多" 
    }
 }

2. ngModel 不需要用[(ngModel)],因为她不是双向绑定，但需要为添加ngModel指令的标签为他指定name属性并赋值，

这个name属性的值会成为ngFrom实例的value属性中所对应的对象中的属性，

#myNIckName="ngModel" 是指ngModel对应的FormControl对象会被模板本地变量所引用。

<div>{{myNIckName.value}}</div>

3. ngModelGroup，是ngForm的一部分， 该指令创建FormGroup对象，它会在ngForm的value属性中表现为嵌套的对象，

ngModelGroup的子属性会表现为嵌套对象的子属性。

控制台：

createUser(info:any){
    console.log(info);
}