如何使用 FormControl 在 Angular 中为 Form 设置值

2024-04-26

<div class="form-group" [formGroup]="gGroup">
  <label for="grouplabel">Group</label>
  <select formControlName="groupControl" [(ngModel)]="groupobj" (ngModelChange)="onSelectGroup($event)" id="group" class="form-control">
        <option>Select</option>
        <option *ngFor="let group of groups" [selected]="current_group === group.name">{{group.name}}</option>
  </select>
</div>

我怎样才能设置的值<select>字段到Select动态地在组件中?

我查看了文档,https://angular.io/api/forms/FormControlName#use-with-ngmodel https://angular.io/api/forms/FormControlName#use-with-ngmodel但仍然没有可以帮助我的例子。

Attempt:

this.gGroup.get('groupControl').setValue('Select');


我想出了一个方法来做到这一点:

<form #f="ngForm">
  <select name="option" ngModel>
    <option value="" disabled>Choose an option</option>
    <option *ngFor="let option of options" [ngValue]="option">
      {{ option.title }}
    </option>
  </select>
</form>
this.f.controls.state.setValue(this.options[0]);

检查我做的这个例子:

https://stackblitz.com/edit/angular-xpeth8 https://stackblitz.com/edit/angular-xpeth8

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 FormControl 在 Angular 中为 Form 设置值 的相关文章

  • Material 2.0.0-beta.3 md-slider不拖动

    希望这是一个愚蠢的问题 我刚刚在为雇主构建的项目中添加了一个 md slider 因此我没有代码来表示抱歉 我将 MdSliderModule 导入到我正在使用的模块中 在我的模板中我想要的位置添加了标签 它出现了 看起来很棒 但不会拖沓
  • 如何在 Angular2 中隐藏和替换组件

    你好 我有一个父组件 A 它有 2 个子组件 B 和 C 父级A默认显示子组件B 现在 当单击父级A上显示的按钮时 它将用子组件C替换子组件B 在Angular2中单击按钮后 如何用组件C替换组件B 为此 您可以使用 ngIf https
  • Angular2排序数组用于在html中的*ngFor中显示

    我正在循环浏览所有帖子 li 当显示每个帖子的日期时 我会执行以下操作 post date date yyyy MM dd HH mm ss 我想要做的是按最新的第一个顺序显示所有帖子 我尝试过使用类似的管道 li li import Pi
  • 在电子打印中构建的角度应用程序显示空白窗口

    我开发了一个角度应用程序 然后在电子中构建该应用程序 该应用程序工作正常 但是当我单击按钮打印特定 div 时 它会打开一个电子的空白窗口 我用ngx print图书馆 它在角度服务方面效果很好 但在电子构建方面遇到了问题
  • 使用 AngularFire 从 Firestore 过滤数据

    我正在尝试使用 Angularfire 的查询集合从 Firestore 过滤数据 https github com angular angularfire2 blob master docs firestore querying coll
  • gyp ERR,Npm 无法获取本地颁发者证书

    我正在致力于 Windows 10 的全新安装 唯一的事情是我安装了 cygwin 以在 cmd 中获取 unix 命令 当我打字时npm install g angular cli它下载了必要的文件 但我收到错误 gyp ERR conf
  • 如果我不使用超时,Angular 2 焦点将不起作用

    正如您所看到的 如果我打算集中输入 我将使用 setTimeout 如果我删除 setTimeout 焦点不起作用 div div
  • Angular service-worker范围在安装过程中遇到错误

    我正在尝试使用 Angular Service Worker 但在尝试使用它时出现错误 这些是我的版本 Angular CLI 15 2 0 Node 16 18 1 Package Manager npm 8 19 2 OS linux
  • Angular 6 Asp.Net(非 Core)Web Api CORS 请求失败

    我正在构建一个 Net Web Api 它将由 Angular 6 客户端使用 但出于某种原因 我无法使其在我的开发环境中工作 我从一个非常简单的 Web Api 开始 它只返回一个字符串 用于前端和后端测试目的之间的通信 GET api
  • 如何在 Angular2 中为表单分配和验证数组

    我的模型 this profile 在 javascript 中有一个属性叫做emails 这是一个数组 email isDefault status 然后我将其定义如下 this profileForm this formBuilder
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th
  • Angular 9:上传图像时如何将 HEIF 文件格式转换为已知的 Web 格式

    我正在维护一个用 Angular 9 编写的 Web 应用程序 PWA 用户可以在 Cropperjs 中上传图像并裁剪 旋转等 在 iOS 上 新的图像格式 HEIF 正在成为标准 这些用 户抱怨他们无法上传照片 似乎iOS有时会自动转换
  • 如何在 TypeScript 中禁用/抑制库中的错误?

    我打开了一些编译器开关来报告代码中的更多问题 例如严格的空检查 但我在使用的库中遇到了数十个错误 例如 default xxx node modules angular core src util decorators d ts 11 5
  • Angular2 与 Jquery-ui 滑块

    我尝试将 Jquery ui 滑块与 angular2 一起使用 我想让变量 slideValue 显示滑块的值 但我不知道如何将我的模型或变量从角度绑定到滑块 这是我的滑块组件 import Component ElementRef In
  • 在 Angular 中深度复制对象

    AngularJS 有angular copy 深度复制对象和数组 Angular 也有类似的东西吗 您还可以使用 JSON parse JSON stringify Object 如果它在你的范围内 那么它就存在于每个 Angular 组
  • 在 Angular 9 应用程序的生产中同时使用 AOT 和 JIT

    因此 我一直在构建一个 Angular 9 应用程序 其中有一个客户仪表板来管理保存在服务器上的模板 这些模板可以通过激活系统在不同的设备上查看 因此设备与用户绑定 所以让我们说https templates com我们有 login da
  • 在停止调试时终止 VS Code 中的 ng 服务任务

    我有一个 Angular 项目 目前正在通过 chrome 调试器在 vs code 内进行调试 我的launch json uses preLaunchTask serve 其中服务定义于tasks json as ng serve 这样
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • 使用 Nginx 在 Docker 容器内部署带有路由器的 Angular2

    我正在尝试部署一个使用框架的路由器功能的 Angular 2 但在 docker 容器内使用 nginx 为其提供服务时遇到一些问题 由 angular cli 构建的 Angular 应用程序具有如下文件结构 dist 08c42df75

随机推荐