angular-reactive-forms 相关问题

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 方法。当我选择该选项时，该方法有效，但是当我添加新数组并选择新选项时，第一个数组将重置。这里...

为 Angular Reactive Forms 交叉属性验证器声明正确的类型？

在本教程中，作者实现了一个密码检查验证器，如下所示： MatchPassword(密码: 字符串, 确认密码: 字符串) { 返回（表单组：表单组）=> { 常量

异步验证器反应形式

payerGeneralInformationValidators = this.formBuilder.group({ 'payerName': ['', [Validators.required, Validators.pattern('[a-zA-Z 0-9`~!@#$%^&,.\'\"*()_+-]* $'), Validators.maxLength...

以编程方式设置用作单选按钮的按钮的值

我正在尝试通过代码设置用作单选按钮的按钮的值。我正在使用反应形式。 我尝试在 ngInit 上设置按钮的初始值 ngOnInit() { this.form = this.fb.g...

如何从类创建映射以提取其属性作为值？

我想在 Angular 模板和 FormGroup 之间创建更强大的类型安全链接。我想到了以下内容，但我不知道如何在 TypeScript 中正确表达它。 我想使用

使用反应式形式运行测试时出错

我有以下代码，并对它进行了一些测试。当我模拟 ts 测试的表单时，它运行良好。当我模拟 html 的相同表单时，最终出现以下错误： 表单没有值访问器

通过 *ngFor

我最近一直在做一个具有巨大表单的项目，并且遇到了性能问题。经过一番研究后，我想知道从反应式表单中选择嵌套 FormArrays 的更好方法是什么......

Angular 中表单无效时提交有效

当除国家/地区以外的所有字段都缺失时，提交按钮不会提交表单，而这是预期的功能。当我选择一个国家/地区但将其他字段留空时，表单将提交....

角反应形式中的打字错误

我从书上得到了这个代码，但是，在原始代码中，他在OnInit()方法中初始化了formgroup。 这就是为什么不存在以下错误的原因。然而，我认为这是错误的，因为...

在 formArray 中带有嵌套 formGroup 的 Angular Reactive Forms

我正在构建一个具有以下结构的表单： { “名称”：“根测试名称”， “定义”： { “名称”：“定义_测试_名称”， “组成...