angular-reactive-forms 相关问题

NG01203：mat-radio-group 的表单控件名称没有值访问器

单元测试失败，显示 Error: NG01203: No value accessor for form control name : 'gender' 。我已经使用了 NG_VALUE_ACCESSOR 但仍然相同。我正在使用响应式表单，HTML 代码是 单元测试失败，提示 Error: NG01203: No value accessor for form control name : 'gender' 。我已经使用了 NG_VALUE_ACCESSOR 但仍然相同。我正在使用响应式表单，HTML 代码是 <mat-radio-group aria-label="Select an option" class="w-48" id="gender" name="gender" formControlName="gender" > <mat-radio-button value="Male" name="male">Male</mat-radio-button> <mat-radio-button value="Female" name="female">Female</mat-radio-button> </mat-radio-group> 我在这里做错了什么 { provide: NG_VALUE_ACCESSOR, useExisting: myComponent, multi: true } 确保您拥有正确的值访问器： 验证您使用的是正确的值访问器令牌 (NG_VALUE_ACCESSOR) 并且它与您的自定义表单控件实现相匹配。 检查您的自定义表单控件： 确保您已在自定义表单控件组件中正确实现了 ControlValueAccessor 接口。 import { Component, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'app-custom-radio-group', template: ` <mat-radio-group [value]="value" (change)="onChange($event)"> <ng-content></ng-content> </mat-radio-group> `, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomRadioGroupComponent), multi: true, }, ], }) export class CustomRadioGroupComponent implements ControlValueAccessor { value: any; onChange: (value: any) => void = () => {}; onTouched: () => void = () => {}; writeValue(value: any): void { this.value = value; } registerOnChange(fn: (value: any) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; } } 确保您的自定义表单控件正确实现 ControlValueAccessor 接口并提供 NG_VALUE_ACCESSOR。 检查您的测试配置： 例如： TestBed.configureTestingModule({ declarations: [CustomRadioGroupComponent, YourComponent], // Include your custom form control and your component imports: [ReactiveFormsModule, MatRadioModule], }).compileComponents(); 检查测试 HTML： 在您的测试 HTML 模板中，确保您正确使用自定义表单控件： <app-custom-radio-group formControlName="gender"> <mat-radio-button value="Male">Male</mat-radio-button> <mat-radio-button value="Female">Female</mat-radio-button> </app-custom-radio-group> 请验证这些方面，如果问题仍然存在，请提供有关自定义表单控件实现和测试设置的更多详细信息，以便我可以帮助您。

输入“AbstractControl | null' 不可分配给类型 'NgIterable<any> |空 |未定义'

我的component.ts代码是 表单 = 新的 FormGroup({ 主题： new FormArray([]), }); addTopic（主题：HTMLInputElement）{ (this.refForm as FormArray).push(new FormControl(topic.value)); //

Angular 反应形式：如何改变发送到后端的数据

我有一个问题，在 React 上似乎相对容易解决，但在 Angular 中却不是那么简单。 假设我有一个表格 提交表单 = this.myform.group({ 文件名称：['',

仅当第一个输入字段不为空时才在第二个输入字段中添加验证器

我正在使用 Angular Forms 开发一个表单，但我遇到了一个死胡同，我想仅当第一个输入字段不为空时才向第二个输入字段添加验证。 假设我有两个输入字段：名称和...

Angular 5 根据另一个字段的值有条件地验证字段

如何根据另一个字段的值有条件地验证一个字段？这是我尝试过的，但似乎不起作用 this.PDform = _formbuilder.group({ [...] 'intlNumber': ['',this.nation...

如何保持无功输入的默认值

我正在制作一个反应式表单，其中填充了数据库中的默认值。因此用户可以随意修改一些数据然后发回表单。 但如果他选择不更改某些字段，我想...

如果属性与列表元素中的名称属性匹配，则从数组添加一个类

我有一个带有多个“块”的反应形式，如下所示： 在左侧，我有一个侧边栏，其中每个块编号都与侧边栏中的数字相匹配。如有错误请补课...

Angular Form 没有为我的表单中的第一个字段设置 FormControl

我已经为这个问题苦苦挣扎了几个星期，但无法弄清楚是什么原因造成的。 （角度版本：16.1.4） 我用一个BehaviorSubject填充这个表单组件，当

双向绑定的属性和事件半部分未绑定在同一个目标

我想在 Angular 中与反应形式进行双向绑定。我想将数据从子组件传输到父组件并返回。 我的子组件 HTML： 我想用 Angular 中的反应形式进行双向绑定。我想将数据从子组件传输到父组件并返回。 我的子组件 HTML： <input type="text" #name class="form-control" (keydown)="oss.test(); addNewItem(name.value)" formControlName="name"> 我的子组件 TypeScript： @Input() namex: string= ""; @Output() additem = new EventEmitter<string>(); 父组件HTML： <app-general [(count)]="count" [(namex)]="currentItem" (value)="this.generalInformation=$event; this.print()" (isValid)="this.generalInformationIsValid=$event"> </app-general> 父组件TypeScript： currentItem: string = ""; 我收到以下错误消息： The property and event halves of the two-way binding 'namex' are not bound to the same target. Find more at https://angular.io/guide/two-way-binding#how-two-way-binding-works 有人可以帮助我为什么会出现此错误吗？ 我想将数据从子组件获取到父组件并返回。 你有 @Input() namex: string = "";如果没有 @Output() namexChange = new EventEmitter()，请尝试添加 namexChange 事件 使用带有输入装饰器的setter，假设您的表单组名称是myForm，控件名称是name @Input() set namex(value: any) { this.myForm.get('name').setValue(value) } –

ASP.NET Core 7 Web API：Angular 表单控件的日期序列化

我一直在 Stack Overflow 和整个网络上搜索，但我似乎找不到直接的答案。 在 Person 类中，Birthday 被定义为 DateTime。 公开课人物 { 公共字符串 N...

使用默认时间选择器以角度进行时间选择器验证

这是基本上我想要的html代码，当我打开时间选择器切换时默认是当前时间，但我想要当前时间+15分钟。 onchange 方法我正在验证时间，但我也遇到错误...

Angular - 如果将值设置为表单控件，则不会显示表单控件无效错误

我有这个编辑器 设置其值以形成控件。 this.FrmGroup.get("name").setValue(this.quill.root.innerHTML)` 我有这个编辑器 <div id="editor"></div> 设置其值以形成控件。 this.FrmGroup.get("name").setValue(this.quill.root.innerHTML)` <div *ngIf="FrmGroup.get('name').invalid && (FrmGroup.get('name').dirty || FrmGroup.get('name').touched)"> <small class="validation-error">Please provide a name.</small> </div> 该值为空，但未显示错误。 形成团体结构： this.FrmGroup = this.fb.group({ name: ['', Validators.required], Description: ['', Validators.required], }); 问题就在这里： *ngIf="FrmGroup.get('name').invalid && (FrmGroup.get('name').dirty || FrmGroup.get('name').touched)" 仅通过满足以下条件即可呈现 HTML 元素： 表单控件无效 同时表单控件要么脏了，要么被触摸。 要么： 设置值后应遮盖表单控件脏污或触摸。 this.FrmGroup.get('name')!.setValue(this.quill?.root.innerHTML); this.FrmGroup.get('name')!.markAsDirty(); // Or this.FrmGroup.get('name')!.markAsTouched(); 演示@StackBlitz 或者如果不需要，删除检查表单控件是否脏或碰的逻辑。 *ngIf="FrmGroup.get('name').invalid"

mat-table 中 FormArray 的表单组件未正确排序

我有一个垫子表，每行都有表单控制组件，如下图所示： 和数据模型如下： 导出类 ProductClass { 构造函数（ 公共 ID：字符串， 公众号：stri...

隐藏字段时阻止 ReactiveForm 的表单验证

我的表单中有一个按钮，在表单有效之前该按钮处于禁用状态。当我的所有字段都可见时，一切都会正常进行。但是，当某个字段被条件（ngIf）隐藏时，验证就会失败......

角度可重复使用的垫子表单字段

在我的 Angular 应用程序中，我有很多带有文本输入的反应式表单，它们都需要错误消息，这是很多重复的代码。 我想为垫子形式创建一个自定义组件...

角度，反应形式循环中的错误

我使用的是 Angular CLI 版本 16.2.1。 我正在学习一门课程，并且正在使用反应形式：在“食谱”列表中，我需要添加一个包含一些输入和成分列表的食谱。问题是

从 formArray 控件打字稿触发选择更改事件

我有一个带有级联下拉菜单的动态表单。当页面加载时，我将值分配给控件，但不触发选择更改事件。 HTML： 我有一个带有级联下拉菜单的动态表单。当页面加载时，我将值分配给控件，但 selectionchange 事件未触发。 HTML： <div formArrayName="userDataAttributes" *ngFor="let other of userForm.get('userDataAttributes')['controls']; let i = index" class="form-group"> <div [formGroupName]="i"> {{i + 1}}. <mat-form-field> <mat-select matInput placeholder="Select Data Attribute" formControlName="dataAttributeId" matNativeControl (selectionChange)="refreshUserDataAttributeValuesByAttrId($event.value, i);"> <mat-option *ngFor="let attr of List1" [value]="attr.dataAttributeId">{{attr.dataAttributeName}}</mat-option> </mat-select> </mat-form-field> <mat-form-field> <mat-select matInput multiple formControlName="dataAttributeValues" matNativeControl> <mat-option *ngFor="let attr of List2[i]" [value]="attr.dataAttributeValueId">{{attr.dataAttributeValue}}</mat-option> </mat-select> </mat-form-field> </div> </div> 打字稿： refreshUserDataAttributeValuesByAttrId(attributeId: number, index: number) { if (attributeId && attributeId > 0) { this.List2[index] = this.List1?.filter(a => a.dataAttributeId === attributeId) ?? []; } else { this.List2[index]= []; } } addUserDataAttributes(dataAttributeId: number, dataAttributeValues: any ): FormGroup{ return this.formBuilder.group({ dataAttributeId: [dataAttributeId], dataAttributeValues: [dataAttributeValues] }); } bindValuesToDynamicForm(){ array: any=[{ dataAttributeId: 1, dataAttributeValues: "4,5"}, { dataAttributeId: 2, dataAttributeValues: "2,3"}] array.forEach((x,i)=>{ (<FormArray>this.userForm.get('userDataAttributes')).push(this.addUserDataAttributes(x.dataAttributeId, x.dataAttributeValues.split(','))); }) } 使用上面的代码，第一个下拉列表dataAttributeId被正确加载 但无法触发该控件的 selectionChange，因此它会刷新 dataAttributeValues 控件并设置值。 试过了， this.refreshUserDataAttributeValuesByAttrId(x.dataAttributeId, i); 有什么帮助吗？ 解决此问题的方法是在设置 dataAttributeId 控件的值后手动调用 refreshUserDataAttributeValuesByAttrId 方法。您可以在 bindValuesToDynamicForm 方法中执行此操作，在该方法中迭代数组并设置值。 具体操作方法如下： bindValuesToDynamicForm() { const array: any = [ { dataAttributeId: 1, dataAttributeValues: "4,5" }, { dataAttributeId: 2, dataAttributeValues: "2,3" } ]; const userDataAttributesFormArray = <FormArray>this.userForm.get('userDataAttributes'); array.forEach((x, i) => { userDataAttributesFormArray.push(this.addUserDataAttributes(x.dataAttributeId, x.dataAttributeValues.split(','))); // Manually call the method to refresh the List2 array at the current index this.refreshUserDataAttributeValuesByAttrId(x.dataAttributeId, i); }); } 将新组推送到表单数组后，将使用当前的 dataAttributeId 和 index 调用 refreshUserDataAttributeValuesByAttrId 方法，这应该会按预期更新您的 List2 数组。 但是，为 dataAttributeValues 控件设置值是不够的，因为数组中的值是字符串，而 mat-option 中的值可能是不同的对象。您需要从 List2[i] 找到正确的对象以设置为 dataAttributeValues 控件的值。 要设置正确的值，您可能需要修改 addUserDataAttributes 方法，从 List2[i] 中查找正确的对象，以设置为 dataAttributeValues 控件的默认值。您可以在使用 refreshUserDataAttributeValuesByAttrId 方法填充 List2[i] 数组后执行此操作。 以下是如何执行此操作的粗略想法： addUserDataAttributes(dataAttributeId: number, dataAttributeValues: any, index: number): FormGroup { // Find the correct objects from List2 to set as the default values const correctDataAttributeValues = this.List2[index]?.filter(attr => dataAttributeValues.includes(attr.dataAttributeValueId)) || []; return this.formBuilder.group({ dataAttributeId: [dataAttributeId], dataAttributeValues: [correctDataAttributeValues] }); } 在您的 bindValuesToDynamicForm 方法中，更新对 addUserDataAttributes 的调用以传递索引： userDataAttributesFormArray.push(this.addUserDataAttributes(x.dataAttributeId, x.dataAttributeValues.split(','), i));

角度形式 Validators.pattern 不适用于匹配 2 个变体

我有一个独特的情况，我必须验证日期时间格式或空字符串。其中任何一个都应该是有效的输入。但例如格式错误或不完整的日期时间应该会导致验证失败......

正则表达式可以工作，但不能以 Angular 形式

我需要使用这个正则表达式进行网址验证。它在 regex101.com 中有效，但在我的 Angular 字段中验证失败。我不知道如何以 Angular 接受的方式修改它。 正则表达式： https:\/\/[A-...

与 Angular 中的动态选择选项相同的方法，这可能吗？

我有一个动态数组，它在选择选项上有一个 onChange 方法。当我选择该选项时，该方法有效，但是当我添加新数组并选择新选项时，第一个数组将重置。这里...