原文出处:https://www.jianshu.com/p/6d075cc506a0
延伸阅读:ngular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
sku-info.html
<form [formGroup]="form">
<div>
<input [(ngModel)]="itemName" [ngModelOptions]="{standalone: true,updateOn:'blur'}" />
</div>
<div>
<input formControlName="itemId" />
</div>
<div>
<input [(ngModel)]="form.value.childId" [ngModelOptions]="{standalone:true}" />
</div>
</form>
<h2>updateOn:'blur'</h2>
<p>itemName:{{itemName}}</p>
<p>childId:{{form.value.childId}} </p>
sku-info.ts
import {Component} from '@angular/core';
import {FormGroup,FormBuilder} from '@angular/forms';
@Component({
selector:"sku-info",
templateUrl:'./sku-info.html'
})
export class SkuInfoComponent {
form:FormGroup;
itemName:string = "测试商品测试商品测试商品";
constructor(private fb:FormBuilder){}
ngOnInit(){
this.form = this.fb.group({
itemId:[332532532],
childId:[2424]
})
}
}