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

在angular中循环使用单选按钮formControl的正确方法是什么?

在Angular中循环使用单选按钮formControl的正确方法是使用ngFor指令来循环生成单选按钮,并将每个单选按钮与一个FormControl对象绑定。

首先,需要在组件中创建一个FormControl对象,可以使用FormGroup或FormControl类来创建。例如:

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

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <div *ngFor="let option of options">
        <label>
          <input type="radio" [formControl]="myForm.controls.option" [value]="option">
          {{ option }}
        </label>
      </div>
    </form>
  `,
})
export class ExampleComponent {
  myForm = new FormControl();
  options = ['Option 1', 'Option 2', 'Option 3'];
}

在上述示例中,我们创建了一个FormControl对象myForm,并使用ngFor指令循环生成了一组单选按钮。每个单选按钮都与myForm.controls.option绑定,并通过[value]属性设置了对应的选项值。

注意,myForm.controls.option中的option需要与FormControl对象的键名保持一致。

此外,还需要在模块中导入ReactiveFormsModule,并将其添加到imports数组中,以便使用表单相关的功能。

代码语言:txt
复制
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule,
  ],
})
export class AppModule { }

这样,就可以正确地在Angular中循环使用单选按钮formControl了。

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

相关·内容

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

使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单带有 ngModel 指令和 name 属性元素,而...在数据验证失败情况下,对于系统来说,表单是不允许提交,因此可以将提交事件绑定到表单 ngSubmit 事件属性上,通过模板引用变量形式,提交按钮处进行数据有效性判断,当无效时,禁用表单提交按钮...同模板驱动表单数据有效性验证相同,响应式表单同样可以使用原生表单验证器,设定规则时,需要将模板控件名对应数据值第二个参数改为验证规则 响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...验证方法,当数据有效时,返回 null,当数据无效时,则会返回一个对象信息,这里 nameinvalid 就是我们模板获取到错误信息 key 值 <div class="form-group...<em>在</em>模板驱动表单<em>中</em>,因为不是直接<em>使用</em><em>的</em> <em>FormControl</em> 实例,因此这里应该在模板上添加一个自定义<em>的</em>指令来完成对于控件数据<em>的</em>校验 <em>使用</em> <em>angular</em> cli 创建一个用来进行表单验证<em>的</em>指令 ng

18.9K20

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

首先我解释下为啥需要 ControlValueAccessor 接口以及它在 Angular 是如何使用。...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...,当 Angular 组件模板遇到 input 或 textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:...jQuery 方法原生 DOM 元素上创建一个 slider 控件,然后使用 widget 属性引用这个控件。... writeValue 方法内我们把得到值传给 slider 组件。 现在我们把上面描述功能做成一张交互式图: ?

3.7K20

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

ControlValueAccessor 这是自定义表单组件核心,只有继承这个接口,才有被 AngularformControl识别的资格。...(isDisabled: boolean): void; } writeValue:初始化时候将formControl值传递给原生表单控件(即,将模型新值写入视图或 DOM 属性); registerOnChange...formControl指令实现: // https://github.com/angular/angular/blob/master/packages/forms/src/directives/reactive_directives...准备工作 经过上面大致了解ControlValueAccessor,正式开始前还需要最后准备工作: 使用npm或者yarn安装jquery npm install jquery 或者 yarn add...Function = () => { }; registerOnChange(fn: any): void { this.onChange = fn; } registerOnTouched 本示例实际未用方法

5.2K20

【linux命令讲解大全】131.循环设备(loop)Linux应用及使用方法

循环设备可将文件虚拟成块设备,以此来模拟整个文件系统,让用户可以将其视为硬盘驱动器、光驱或软驱等设备,并挂载为目录来使用。...-f:寻找第一个未使用循环设备。 -o :设置数据偏移量,单位是字节。...loop设备介绍 类UNIX系统,loop设备是一种伪设备(pseudo-device),或者也可以说是仿真设备。它能使我们像块设备一样访问一个文件。...使用之前,一个loop设备必须要和一个文件进行连接。这种结合方式给用户提供了一个替代块特殊文件接口。因此,如果这个文件包含有一个完整文件系统,那么这个文件就可以像一个磁盘设备一样被挂载起来。...至此,顺便可以再理解一下loop之含义:对于第一层文件系统,它直接安装在我们计算机物理设备之上;而对于这种被挂载起来镜像文件(它也包含有文件系统),它是建立第一层文件系统之上,这样看来,它就像是第一层文件系统之上再绕了一圈文件系统

30010

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,响应式表单,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue

2.8K50

Angular2 :从 beta 到 release4.0 版本升级总结

它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器添加服务提供商。 具体请参考官方文档。.../commom'; => import {FormControl} from '@angular/forms'; 原使用[ngFormModel]属性 更改表单属性 [ngFormModel] 为 [...(v4.0.0)中封装http服务对参数standardEncoding编码方法,见node_modules/@angular/http/@angular/http.js文件,导致后台获取图片地址失败...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同实例。...原因:angular(v4.1.1)使用ActivatedRouteAPI获取路由信息。

8.1K00

Angular17 使用 ngx-formly 动态表单

: 推荐使用 angular-cli 提供 ng add 进行安装配置: # 1..../schematics --ui-theme=ng-zorro-antd Angular CLI 添加新页面: 推荐使用 angular-cli 提供 ng generate 自动生成: ng g m...label}格式不正确`, }, }, } 自定义携带选项验证函数: 在前面为邮箱定义验证函数使用了一个比较通用正则,如果在实际使用时除了直接修改验证函数正则外,还可以通过第三个选项参数实现验证范围缩小...[a-zA-Z]{2,}$/, }, }, ], }, } 自定义异步验证实现唯一校验: 通过接口实现手机号系统唯一使用也是最为常见一个场景,通过异步验证需要使用使用同步验证函数时...CardPanel 组件类,但要记得将 CardPanel 组件提前注册后再使用; 创建自定义 Extensions 自定义扩展可以为实现动态表单提供更加便利帮助,如在系统通常相同 key 表单需要对应相同

33810

Angular5.0.0新特性

Angular Universal是一个帮助开发者实现SSR开源项目,通过服务端渲染 Angular应用程序,然后客户端引导启动程序并生成HTML,由此更好支持那些对javascript不太友好化境来提高应用程序性能...增强装饰符支持 装饰符降低了使用useValue、useFactory、data对lambda表达式要求,开发者也可以使用一个lamdba表示来代替一个已定义命名函数,也就意味着你可以不事先在...4.国际化号码、日期和货币管道   Angular5已经建立了新号码,日期和货币管道,增加了跨浏览器标准化实现,消除国际化不同环境差异。...5.0管道可以使用我们自己实现,可以在任何地方实现本地化支持和配置。...8.HttpClient   4.3HttpClient模块被封装在@angular/common,新HttpClient被封装在@angular/common/http,更新Http模块后

1.7K10

AngularJS中使用表单输入应用设计

Angular使用表单元素非常方便。正如我们在前面几个例子中看到,你可以使用ng-model属性把元素绑定到你模型属性上。...这一机制对于所有标准表单元素都可以起作用,例如文本框、单选按钮、复选框,等等。...举例来说,当用户做了某件事情时候,我们希望程序能真正地做出某种动作。对于输入元素来说,你可以使用ng-change属性来指定一个控制器方法,一旦用户修改了输入值,这个方法就会被调用。...为了能够正确地刷新输入框,而不管它是通过何种途径进行刷新,我们需要使用$scope$watch()函数。本章后续内容里将会详细讨论这个watch函数。...为了能够正确地刷新输入框,而不管它是通过何种途径进行刷新,我们需要使用$scope$watch()函数。本章后续内容里将会详细讨论这个watch函数。

2K60

Angular 自定义属性指令

本文将使用 UltimateAngular/angular-pro-src 示例,来一步步介绍自定义属性指令相关知识。...如果使用其它名称,比如 event 的话,我们就不能正确获取事件对象。...('style.border') border: string; 设置完属性绑定后,我们来更新一下 onKeyDown() 方法代码,当发现输入非数值时,为当前输入框设置一个红色边框: this.border...我们定义了一个输入属性,用于接收用户自定义提示消息,之后通过调用 DOM API 创建了一个 div 元素,然后 ngOnInit 生命周期钩子,执行相关初始化操作。...Angular 表单模块,也大量使用了 exportAs 属性,比如 ngModel、ngForm、ngModelGroup 及 formControl 指令等。

2K30

基于 element-plus 封装一个依赖 json 动态渲染查询控件 文本数字单选查询勾选和开关级联选择日期年、年月、年周查询日期时间查询快速查询自定义查询方案更多查询

可以“表单控件”里面添加测试数据,数据会存入webSQL。 受限于webSQL,有些查询功能无法实现。 功能演示 查询功能具体是什么样子呢?...所以这里单选查询支持两种查询方式: =: 只能查询一个选项,对应单选。 包含:可以同时查询多个选项,对应多选。 支持清空查询条件,即点击右侧“x”。 多选支持防抖。 勾选和开关 ?...二者对应数据类型是 bool 型(bit),所以只有“=”这一种查询方式,增加了一个“清空”按钮,这样可以单独清掉查询条件。 级联选择 ?...那么我们查询时候,就需要把查询结果按照字段给拆分开,这样才便于查询。...目前有表单子控件、表单控件、查询子控件、查询控件,以后还会有列表控件、按钮控件等。 control-web web 控件意思。存放组件UI部分。

2K20
领券