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

﹏ヽ暗。殇╰゛Y 2022-10-01 13:57 160阅读 0赞

原文出处：[https://www.jianshu.com/p/6d075cc506a0][https_www.jianshu.com_p_6d075cc506a0]  
延伸阅读：[ngular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】][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]
        })
      }
    }

[https_www.jianshu.com_p_6d075cc506a0]: https://www.jianshu.com/p/6d075cc506a0
[ngular_ _input _name_ngModelOptions]: https://www.cnblogs.com/lishidefengchen/p/7018372.html

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular5 使用 ueditor （实用）

原文出处：[https://www.cnblogs.com/guofan/p/10065138.html][https_www.cnblogs.com_guofan_p_100

ゝ一纸荒年。/ 2023年07月04日 14:29/ 0 赞/ 15 阅读

相关 angular async和await (实用）

原文出处：[https://blog.csdn.net/hotboyboy/article/details/102825281?utm\_medium=distribute.p

小咪咪/ 2023年02月22日 10:56/ 0 赞/ 10 阅读

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

原文出处：[https://www.jianshu.com/p/6d075cc506a0][https_www.jianshu.com_p_6d075cc506a0] 延伸

﹏ヽ暗。殇╰゛Y/ 2022年10月01日 13:57/ 0 赞/ 161 阅读

相关 angular2中ngModel绑定问题

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhang

落日映苍穹つ/ 2022年06月11日 04:47/ 0 赞/ 184 阅读

相关 angular2中ngModel绑定问题

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhang

待我称王封你为后i/ 2022年06月11日 04:47/ 0 赞/ 222 阅读

相关 Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法

原文出处：[https://www.jb51.net/article/117465.htm][https_www.jb51.net_article_117465.htm]

左手的ㄟ右手/ 2022年05月17日 04:04/ 0 赞/ 213 阅读

相关 angular2在双向数据绑定时[(ngModel)]无法使用的问题

原文出处：[https://blog.csdn.net/u011321546/article/details/78376679][https_blog.csdn.net_u01

客官°小女子只卖身不卖艺/ 2022年05月17日 03:58/ 0 赞/ 161 阅读

相关 angular4使用ngModel时候报错：ERROR Error: If ngModel is used within a form tag, either the name.....

angular4中使用\[(ngModel)\]="date"绑定表单数据的时候报错： ERROR Error: If ngModel is used within a fo

超、凢脫俗/ 2022年02月15日 11:38/ 0 赞/ 207 阅读

相关 26句实用的英语

1. After you. 你先请。这是一句很常用的客套话，在进／出门,上车得场合你都可以表现一下。 2. I just couldn't help it. 我就

古城微笑少年丶/ 2021年09月12日 03:32/ 0 赞/ 309 阅读

相关解决[disabled]="true"与formControlName冲突

import { FormBuilder } from '@angular/forms'; form; constructor(private fb: FormBuild...

小灰灰/ 2021年03月30日 16:03/ 0 赞/ 593 阅读