美文网首页
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

    sku-info.html sku-info.ts 深圳 天之骄子

  • If ngModel is used within a form

    angular2在form标签中,如果使用[(ngModel)],input标签必须加标识。(name=”“)

  • 【Angular2】模板语法之 ngModel

    通过NgModel实现双向绑定 当开发一个数据录入表单的时候,我们常常希望既可以显示数据的属性值,当用户更改时,又...

  • Angular之表单验证

    1.基本思想 通过ngModel跟踪修改状态与有效值验证 2.必须遵守 O元素要有name属性O通过ngModel...

  • [(ngModel)]

    虽然NgModel是一个有效的Angular指令,但它默认情况下却是不可用的。 它属于一个可选模块FormsMod...

  • Angular 手动实现ngModal数据双向绑定

    ngModel Angular中我们在formsModule中使用ngModel实现数据的双向绑定 这里的ngMo...

  • input

    1、ngModel 2、定义模版引擎

  • 3.5 使用 Angular2 框架

    3.5 使用 Angular2 框架 问题一:如何接入Angular2 框架? 由于 Angular2 项目中采用...

  • 1.Angular2 概述

    [TOC] Angular2 是什么? 按照官网的定义,Angular2是一款全新的兼顾移动端与桌面端的框架具有如...

  • spark_learn

    Angular2学习笔记——NgModule es6 新增的map和foreach AngularJS2.0 学习...

网友评论

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

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