首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

不能在运行时使用父formGroup指令使用ngModel注册表单控件

在Angular中,不能在运行时使用父formGroup指令使用ngModel注册表单控件。这是因为在Angular中,ngModel指令需要在编译时与formGroup指令进行绑定,以便进行表单验证和数据绑定。

当我们使用父formGroup指令创建一个表单组时,我们可以使用FormControl实例或FormGroup实例来注册表单控件。这样,我们可以在组件中访问和操作这些表单控件。

如果我们想在运行时动态地添加表单控件,我们可以使用FormBuilder类来创建动态表单。FormBuilder类提供了一些方法,如group()、control()和array(),用于创建FormGroup、FormControl和FormArray实例。

下面是一个示例代码,展示了如何使用FormBuilder类动态地添加表单控件:

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="name">
    </form>
  `
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', Validators.required]
    });
  }
}

在上面的代码中,我们使用FormBuilder类创建了一个名为myForm的FormGroup实例,并在其中添加了一个名为name的FormControl实例。我们还使用formControlName指令将该表单控件与模板中的输入框进行绑定。

这样,我们就可以在运行时使用FormBuilder类动态地添加表单控件,并通过formControlName指令进行绑定和操作。

推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它是一款全托管的云原生应用开发平台,提供了丰富的云开发能力和工具,包括云函数、云数据库、云存储等,可帮助开发者快速构建和部署云原生应用。

腾讯云云开发产品介绍链接地址:https://cloud.tencent.com/product/tcb

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...而响应式表单表单数据发生变更时,FormControl 实例会返回一个新的数据模型,而不是直接修改原来的数据模型 4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单使用 ngModel...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

Angular系列教程-第四节

等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...它会控制那些带有 ngModel 指令和 name 属性的元素,监听他们的属性。...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的值(获取setvalue...和更新) formgroup使用 表单提交 更新部分内容(patchValue) 表单验证(导入Validators,设置字段属性) 表单状态(status) formarray(管理任意数量控件...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

AngularDart4.0 指南- 表单

用初始表单布局创建一个模板。 使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。...任何唯一值将会这样做,但使用描述性名称是有帮助的。 将[(ngModel)]与表单结合使用时,定义ngControl指令是一项要求。...在内部,Angular创建NgFormControl实例,并使用Angular附加到标签的NgForm指令注册它们。...每个input元素都有一个ngControl指令,Angular表单需要用这个指令表单注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能会显示如下: ?...NgForm指令补充表单元素的附加功能。 它包含用ngModel和ngControl指令为元素创建的控件,并监视它们的属性,包括它们的有效性。

17.5K30

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

对象会被 NgModel 指令隐式创建(译者注:可查看 Angular 源码这一行): @Directive({ selector: '[ngModel]...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你在 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...writeValue 方法设置原生表单控件的值(译者注:你可能会参考 L186 和 L41);使用 registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数(译者注:你可能会参考这三行...交互式表单控件 上面的实现还不能让我们自定义的 slider 控件组件交互,所以还得使用输入/输出绑定来是实现组件间数据通信: export class NgxJquerySliderComponent...提供者用来指定实现了 ControlValueAccessor 接口的类,并且被 Angular 用来和 formControl同步,通常是使用组件类或指令注册

3.8K20

AngularDart4.0 指南- 模板语法二 顶

NgModel - 与[(ngModel)]形成元素的双向绑定 在开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...您不能将[(ngModel)]应用到非表单原生元素或第三方自定义组件,除非您编写了一个合适的值存取器,这个技术超出了本指南的范围。...heroForm是一个Angular NgForm指令的引用,可以跟踪表单中每个控件的值和有效性。 原生元素没有form属性。...但是NgForm指令有,它解释了如果heroForm.form.valid无效并且将整个表单控件树传递给组件的onSubmit方法,您可以禁用提交按钮。...了解“结构指令”指南中的差异。 引用变量的范围是整个模板。 不要在同一模板中多次定义相同的变量名称。 运行时值将是不可预知的。 你可以使用ref-前缀替代#。

29.9K20

Angular 内容投影

在介绍 content projection 之前,我们先来观察一下以下的表单。对于同一个系统来说,下面的两个表单的区别在于使用不同的标题。...答案是可以的,在 Angular 中引入了内容投影的概念,即通过使用 指令来实现内容投影的功能。 ?...select 属性 如果你已经理解了上面的内容,那我们继续,假设对于注册表单,”提交“ 按钮的名称我们想改为 ”注册“,而登录表单的 ”提交“ 按钮,我们想改为 ”登录“。...以上示例我们使用元素选择器,来实现选择性内容投影,最后的运行结果如下: ? 组件投影 ng-content 指令除了支持标准的 HTML 标签外,还支持自定义指令。...因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序的工作量。

2.5K20

Angular6自定义表单控件方式集成Editormd

(isDisabled: boolean): void; } writeValue:在初始化的时候将formControl的值传递给原生表单控件(即,将模型中的新值写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件的值更新时通知Angular表单控件更新的函数(即,设置当控件接收到 change 事件后,调用的函数) registerOnTouched:用来获取通知用户正在交互的函数(即,设置当控件接收到...明确来说,那些原生表单控件都有其对应的ControlValueAccessor,比如: - DefaultValueAccessor - 用于 text 和 textarea 类型的输入控件 - SelectControlValueAccessor...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件和Angular表单控件能够保持一致的原理,可以看下... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器,支持NgModel

5.2K20

angularjs 表单验证

一、常用的表单验证指令  1....最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 3...最大长度 验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength="{number}": <input type="text" ng-maxlength="20"...借助这些属性,我们可以对表单做出实时响应。 可以使用formName.inputFieldName.property的格式访问这些属性。 修改的表单 布尔型属性,当且仅当用户实际已经修改的表单。...$setViewValue()方法适合于在自定义指令中监听自定义事件(比如使用具有回调函数的jQuery插件),我们会希望在回调时设置$viewValue并执行digest循环。

6.6K70

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

响应式表单中的 Rx Angular 的表单处理非常强大,有模版驱动的表单和响应式表单两类,两种表单各有千秋,在不同场合可以分别使用,甚至混合使用,但这里就不展开了。...我们这里使用了响应式表单,也非常简单,就是一个 form 里面 3 个控件,这里我采用了官方的 Material 控件,如果你觉得不爽,可以直接用基础的 HTML 控件搭配样式即可。...Angular 中处理响应式表单只有 3 个步骤: 1、在组件的 HTML 模版中给要处理的控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...]="xxx" 指令,这个 xxx 就是你在组件中声明的 FormGroup 类型的成员变量:比如下面代码中的 form: FormGroup; 3、在组件的构造函数中取得 FormBuilder 后(...比如下面代码中的 constructor(private fb: FormBuilder) { }),用 FormBuilder 构造表单控件数组并赋值给刚才的类型为 FormGroup 的成员变量。

5.2K10

AngularDart4.0 指南-体系结构概述 顶

数据绑定 如果没有框架,您将负责将数据值推送到HTML控件中,并将用户响应转化为操作和值更新。...每个表单都有一个方向 - 从DOM到DOM,或者在两个方向。...双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号中。...数据绑定对于组件和子组件之间的通信也很重要。 指令 ? Angular模板是动态的。 当Angular呈现它们时,它根据指令给出的指示转换DOM。 指令是一个带有@Directive注解的类。...属性指令会改变现有元素的外观或行为。 在模板中,它们看起来像常规的HTML属性,因此也就是名称。 实现双向数据绑定的ngModel指令是一个属性指令的例子。

7.9K30

AngularJs指令解密

在例子中我们使用my-前缀(比如my-derictive)。 当AngularJS在DOM中遇到具名的指令时,会去匹配已经注册过的指令,并通过名字在注册过的对象中查找。...千万别用 ‘C’ 或者 ‘M’ 来限制你的指令。 用 ‘C’ 不能使之在标记中凸显出来, 用 ‘M’ 是为了向后兼容。 如果你觉得有趣, 你可以用一个例子来设置 restrict 为 ‘ACME’。...这些选项可以单独使用,也可以混合在一起使用。 属性是用来声明指令最常用的方式,因为它能在包括老版本的IE浏览器在内的所有浏览器中正常工作,并且不需要在文档头部注册新的标签。...一个指令会将内部子指令的模板合并在一起成为一个模板函数并返回,它无法查找指令,只能通过模板函数访问内部子指令 ngModel ngModel提供更底层的API来处理控制器内的数据。...它和\$parser流水线互不影响,用来对值进行格式化和转换,以便在绑定了这个值的控件中显示。

2.2K70

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券