美文网首页
Angular2~6 [(ngModel)] 与 formCon

Angular2~6 [(ngModel)] 与 formCon

作者: niccky | 来源:发表于2018-11-26 22:40 被阅读0次

    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]
        })
      }
    }
    

    深圳 天之骄子

    相关文章

      网友评论

          本文标题:Angular2~6 [(ngModel)] 与 formCon

          本文链接:https://www.haomeiwen.com/subject/dmoiqqtx.html