Angular2~6 [(ngModel)] 与 formControlName 共存 （实用）

原文出处：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]
    })
  }
}