与Angular模板或反应形式相关的问题。
类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误
我是一名初学者 Angular 开发人员，我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是我...
使用 StrictNullChecks 将表单组控件映射到可选函数参数的更好方法
所以最近在我的 Angular 项目中，我打开了 StrictNullChecks 并一直在检查和修复错误。我发现令我困惑的一个错误是 FormControls/FormGroups。 我哈...
我需要显示用户的姓名和课程列表。不同的用户有不同数量的课程，因此，我正在尝试角度形式数组。 这是我的 .ts： this.form = this.fb.group({ 名称：['...
如何将表单和底层模型类型绑定在一起？ 给定 接口 IUser { 名称：字符串， 年龄： 数字 } 我如何生成： 表单=新的FormGroup（{ 名称：新 FormContro...
我有这个表单，但是打开后它非常长，用户必须滚动浏览它，有没有办法在两列中显示表单字段，因为表单字段很多？ 有没有
Angular 打字稿无法绑定到“formGroup”，因为它不是 Angular 中“form”的已知属性
我想使用formcontrol从表单中提取数据，如果我从html中删除[formcontrol] =“userForm”，除html之外的所有内容都不会出现错误，项目运行完美...
我正在尝试实现自定义表单控件，它将输入作为布尔值，但是当我输入“false”时它会卡住，它给我带来了疯狂的结果，这是我的代码 切换.compone...
如何在 Angular 中创建带有输入的自定义组件并将其绑定到表单？
假设我们有这样的东西 ... 假设我们有这样的东西 <form #f="ngForm" (ngSubmit)="onSubmit()"> <rc-some-component ngModel name="someComponent"></rc-some-component> <label for="fname">First name:</label> <input ngModel type="text" id="fname" name="fname"><br><br> </form> rc-some-component 的组件是： <div> //...some html <input ngModel name="someComponent" type="file" class="d-none" (change)="onUploadImage()" /> </div> 当我尝试检查 onSubmit 上发送的数据时，我只从 fname 获取数据。这意味着我无法从 rc-some-component 内部的输入获取数据。我该如何尝试解决这样的问题？ 我应该创建类似 ControlValueAccesor 的东西吗？ 我只想在调用 onSubmit 时访问输入数据（来自此自定义组件）（这样我就可以在 this.formName.value 中检查它） 您需要实现 ControlValueAccessor 接口，如果您有兴趣添加验证，甚至可能还需要实现 Validator 接口。 我写了一篇关于自定义表单控件的文章，您可以查看。 我还创建了这个 StackBlitz 演示，它正是您所寻找的。 如果您使用 FormGroup 和 FormControls 构建表单，这里是一个解决方案 首先，在您的子组件上，您需要使用 <div [formGroup]="nameOfFG"> 打包输入，在您的输入上，您需要设置属性 formControl="nameOfFC'。 在您的类中，您唯一需要做的就是提供@Input 属性。在这种情况下，您需要 @Input nameOfFG:FormGroup 和 @Input nameOfFC:string 。然后，在父 component.html 中，您需要输入这些值 - 您的 nameOfFG 和 nameOfFC。表单需要位于 [] 中，因为您将从组件中绑定它。 <custom-component [nameOfFG]="fromGroup" nameOfFC="formControl"></custom-component> 然后，在父类中只需使用您正在使用的 formControl 初始化 ngOnInit() 中的 formgroup。 如果您仍然想反其道而行之，请查看EventEmitter。基本上在子组件上，当输入更改时将调用 EventEmitter，通过 @Output 导出，然后可以使用它来更改父类中的变量 - <custom-component (event)="changeYourVariable()"></custom-component>
如何防止 Angular 表单在父组件中捕获事件之前必须发出两次？
我有一个 Angular 应用程序，其中包含一个允许用户增加数量的表单。 当用户单击“添加”按钮时会加载表单，并预先填写一定数量的...
模板解析错误：创建自定义表单元素时没有 NgControl 提供程序
我一直在尝试使用 Angular 元素创建自定义元素，对于表单输入，我一直在尝试使用 Angular 的 ControlValueAccessor 来实现这一点，正如 Eliran Eliassy 在本文中讨论的那样...
我正在遵循有关动态表单的 Angular 17 指南。在此代码片段中，他们展示了如何使用 ngFor 循环来动态显示表单控件数组。 我正在遵循有关动态表单的 Angular 17 指南。在此代码片段中，他们展示了如何使用 ngFor 循环来动态显示表单控件数组。 <div formArrayName="aliases"> <h2>Aliases</h2> <button type="button" (click)="addAlias()">+ Add another alias</button> <div *ngFor="let alias of aliases.controls; let i=index"> <!-- The repeated alias template --> <label for="alias-{{ i }}">Alias:</label> <input id="alias-{{ i }}" type="text" [formControlName]="i"> </div> </div> 如何使用 Angular 17 中引入的 new @for 循环语法 来代替？我尝试了以下方法： <div formArrayName="aliases"> <h2>Aliases</h2> <button type="button" (click)="addAlias()">+ Add another alias</button> @for (alias of aliases.controls; track $index; let i = $index;) { <div> <!-- The repeated alias template --> <label for="alias-{{ i }}">Alias:</label> <input id="alias-{{ i }}" type="text" [formControlName]="i"> </div> } </div> 但是我得到的错误是Property $index does not exist on ... 我期望使用的 for 循环语法会产生与使用 ngFor 的示例相同的结果。 锯齿存在问题，其中let i = $index;会消除$index，因此无法在轨道上工作： 您可以这样修复它： @for (alias of aliases.controls; let i =$index; track i; ) { <div> <!-- The repeated alias template --> <label for="alias-{{ i }}">Alias:</label> <input id="alias-{{ i }}" type="text" [formControlName]="i"> </div> } 或者更好的是，你甚至不再需要别名，你可以直接使用模板中隐式的$index @for (alias of aliases.controls; track $index) { <div> <!-- The repeated alias template --> <label for="alias-{{ $index }}">Alias:</label> <input id="alias-{{ $index }}" type="text" [formControlName]="$index"> </div> } 您尝试在 Angular 17 中使用新的 @for 循环语法时似乎存在一些混乱。在 Angular 17 中循环遍历表单数组中的表单控件的正确语法如下： <div formArrayName="aliases"> <h2>Aliases</h2> <button type="button" (click)="addAlias()">+ Add another alias</button> <div *ngFor="let alias of aliases.controls; index as i"> <!-- The repeated alias template --> <label for="alias-{{ i }}">Alias:</label> <input id="alias-{{ i }}" type="text" [formControl]="alias"> </div> </div> 在更新的语法中，您使用 *ngFor 来迭代 aliases.controls 中的表单控件。 let alias 语法允许您在循环中引用当前表单控件，而 index as i 允许您获取索引。然后，您可以使用 [formControl]="alias" 将表单控件绑定到输入。 您尝试的 @for 语法对此用例无效。正确的 Angular 17 语法使用 *ngFor 指令以及当前项和索引的指定变量名称。在这种情况下不需要 trackBy 函数。
实现 ControlValueAccessor 和 Validator 接口的自定义控件组件。 此自定义控件无法正确显示来自父组件验证器的错误。甚至家长组成...
我定义了三种自定义类型，其中两种相互嵌套。 接口响应{ 标签：字符串； 问题：问题[]； } 界面问题{ 标签：字符串； 回复：回复...
我有一个数组，它根据其中的对象创建视图。可以使用 ngModel 更改对象内部的值。发生的情况是，当我得到数组的响应时，我设置了相同的分辨率...
我有一个屏幕，其中输入字段根据 API 响应动态填充。每个输入字段都有一组与其关联的按钮。我想仅在字段...
如何在不触发valueChanges的情况下触发Angular FormControl验证？
我很好奇是否有人找到了一种无需使用即可触发验证的方法 updateValueAndValidity() （根据文档，它还会触发 FormControl 上的 valueChanges，这并不总是设计...
Angular 使用 ReactiveForms 验证 ControlValueAccessor
我使用 ControlValueAccessor 在 Angular 中创建自定义输入。我发现 FormControls 的验证停止工作。 这是我在 Stackblitz 上制作的一个简单示例。 @组件...
Angular 14：带有布尔值和默认值的类型化 FormControls
我尝试以下方法 new FormControl({ value: true }, Validators.required), 并得到错误，表示不存在布尔值的重载。使用 新的表单控件 我尝试以下方法 new FormControl<boolean | undefined>({ value: true }, Validators.required), 并得到错误：不存在 overloads 的 boolean 。使用 new FormControl<string | null>({ value: null, disabled: false })); 有效 ==> 那么，Angular 14 中 boolean 的类型化 FormControls 的正确语法是什么？ 您可以像下面这样定义它： new FormControl<boolean>(true, Validators.required); 您可以将选项传递给它，如下所示： new FormControl<boolean>(true, { updateOn: 'submit', nonNullable: true, validators: Validators.required, }); 在此处阅读有关 Angular 14 类型化表单的更多信息：https://angular.io/guide/typed-forms#specifying-an-explicit-type
我如何知道自定义表单控件何时在 Angular 中被标记为原始？
我的 Angular 应用程序中有几个自定义表单控件组件，它们实现了 ControlValueAccessor 接口，并且效果很好。 然而，当在父窗体上调用 markAsPristine() 时，...
我有一个巨大的FormGroup，它有很多FormControl和很多嵌套的FormArray，我需要获取顶部FormGroup除了一些控件之外的值。这些控件可能位于...