angular-reactive-forms 相关问题

关于角度反应形式的问题,一种用于以反应式方式创建表格的角度技术。将此标记用于不是特定于单个Angular版本的问题。

如何使用新的表单控件设置动态验证

我有一个对象应该构建一个表单 常量文本框 = { 字体颜色:'红色', 字体大小:'20', 占位符:'名称', name: '输入姓名', 标签:'穆罕默德', 验证: { 要求:真实...

回答 0 投票 0

如何设置 Angular 响应式表单数组中表单控件的值

我有一个反应形式: this.leDetailsUpdateForm = new FormGroup({ entityNameArray: new FormArray([ 新的表格组({ id: 新的 FormControl(), 实体名称:新的 FormCo...

回答 2 投票 0

具有共享过滤选项的 Angular 15 反应形式的多个选择输入

我正在构建一个具有动态生成的选择元素的 Angular 15 反应表单,让用户映射列以进行 .csv 导入。 我想以这种方式过滤所有选择元素: 用户

回答 0 投票 0

错误消息不会以角度形式消失

我有一个问题是错误消息没有出现在表单字段中。 在 ngOnInit() 中,我们声明此代码用于删除错误消息,此代码只需将鼠标悬停在 ...

回答 0 投票 0

formGroup.getRawValue() 抛出角度错误

在我自己的库中将 FormControl 添加到 FormGroup 时,formGroup.getRawValue() 出错。 进口 { 成分, 启动时 } 来自“@angular/core”; 进口 { 表单生成器, 表格组 } 来自'@

回答 1 投票 0

Reactive Form Angular 和传递控制

我对 Angular Reactive Forms 中的良好实践有疑问。 我有带有输入文本的自定义组件: 我对 Angular Reactive Forms 中的良好实践有疑问。 我有带有输入文本的自定义组件: <div class="form-group"> <label [for]="inputId" *ngIf="label">{{label | translate}}</label> <div> <input [formControl]="control" [id]="inputId" class="form-control"> </div> <div> and in ts: import { Component, Input, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AbstractControl, Form, FormControl, ReactiveFormsModule } from '@angular/forms'; import { TranslateModule } from '@ngx-translate/core'; @Component({ selector: 'app-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, TranslateModule], templateUrl: './text-input.component.html', styleUrls: ['./text-input.component.scss'] }) export class TextInput { @Input() inputId = ''; @Input() control!: FormControl; @Input() label = ''; } 我在父组件中使用它,如下所示: 在 html 中 <form [formGroup]="form" (ngSubmit)="save()"> <app-text-input [label]="'test'" [control]="getControl('test')" [inputId]="'test'"></app-text-input> </form> 在 ts getControl(control: string): FormControl { return <FormControl>this.form.get(field); } this.form = this.formBuilder.group({ test: ['', [Validators.required], ], }); 这样用可以吗?因为有时我会看到带有吸气剂的解决方案,其中每个控件都有不同的吸气剂,例如: get test1(): FormControl { return this.form.get('test1') as FormControl}; get test2(): FormControl { return this.form.get('test1') as FormControl}; 如果我们谈论不必要的检测或性能,这些解决方案之间是否存在差异? 与评论相关 - 我的 app-text-input 是自定义组件,所以我必须在这里传递我的控制权。我使用函数 getControl 来做到这一点,我只是想知道这是一个很好的解决方案。 因为你使用的是 FormGroup 在我看来最干净的方法是使用 FormControlName <app-text-input [label]="'test'" [formControlName]="'test'" [inputId]="'test'"></app-text-input> 您的 form 将具有控件名称的位置 this.form = this.fb.group({ test: ['', Validators.required] }); fb 是 formBuilder 以防你不熟悉它 我使用这样的反应形式 someForm.ts <form novalidate autocomplete='off' [formGroup]='this.parentForm' > <app-input-text [parentForm]='this.someForm' [formCtrlName]="'search'" // => of course, it could be dynamic > </app-input-text> </form> 应用程序输入文本.ts export class InputTextComponent implements OnInit { @Input() parentForm: FormGroup; @Input() formCtrlName: string; @Input() placeholder: string; constructor() { } ngOnInit() { } } app-input-text.html <form novalidate autocomplete='off' [formGroup]='this.parentForm' > <input matInput [placeholder]='this.placeholder' [formControlName]='this.formCtrlName' > </form> 我喜欢将组件拆分得更细... 我用这种方式可以在父表单中操作所有验证... 输入可以非常可重用,我在很多项目中都使用这种方式并取得了很好的效果。

回答 2 投票 0

Angular 以反应形式验证日期

我正在尝试使用反应形式验证日期格式 如果格式不匹配则显示错误消息 (MM/DD/YYYY) 有效的日期格式是 2020 年 6 月 30 日(月/日/年) 12/30/20...

回答 2 投票 0

嗨如何循环并以角度形式向数组添加值

HI 所以我正在尝试使用 asp.net core web api 作为后端和 anglar 作为前端来设置一个基本的考勤系统,我会为您提供代码,然后解释问题 嗨,所以我正在尝试使用 asp.net core web api 作为后端和 anglar 作为前端来建立一个基本的考勤系统,我会为您提供代码,然后解释问题 <form [formGroup]="attendanceForm" (ngSubmit)="onSubmit()"> <section class="form-part"> <div class="row" id="form-part-row"> <div class="col" id="form-part-heading-col">Mark <br> Attendance</div> <div class="col" id="form-part-date-col"> <input type="date" formControlName="date" id="date-input" class="form-control"> </div> </div> </section> <div *ngFor="let item of getclass"> <section class="student-list" *ngFor="let student of item.students"> <div class="row" id="student-list-row"> <div class="col" id="student-list-name-col">{{student?.name}} - {{student?.rollNumber}}</div> <div class="col" id="student-list-mark-col"> <div class="btn-group"> <button class="btn btn-present" type="button" (click)="attendanceForm.patchValue({isPresent: true, studentId: student.id});"> <i class="fa-solid fa-hand" (click)="onPresentClick(student.id)" [ngStyle]="{ borderBottom: studentsClicked[student.id] === true ? '3px solid #d2f9a7' : 'none' }"></i> </button> <button class="btn btn-absent" type="button" (click)="attendanceForm.patchValue({isPresent: false, studentId: student.id});"> <i class="fa-solid fa-hand-fist" (click)="onAbsentClick(student.id)" [ngStyle]="{ borderBottom: studentsClicked[student.id] === false ? '3px solid #d2f9a7' : 'none' }"></i> </button> </div> </div> </div> </section> </div> <section class="mark-button"> <div class="row"> <div class="col" id="submit-button-col"> <button class="btn btn-submit" type="submit">Mark Attendacne</button> </div> </div> </section> </form> 所以这是用于添加考勤的表单现在表单初始化是 this.attendanceForm = this.fb.group({ date: ['', Validators.required], classid: [this.classId, Validators.required], studentId: ['', Validators.required], isPresent: ['', Validators.required], }); 及加签方法 onSubmit(): void { this.attendanceRecords = []; // clear the array if (this.attendanceForm.invalid) { return; } this.getclass.forEach((cls) => { cls.students.forEach((student) => { const isPresent = this.attendanceForm.get(`isPresent`)?.value; const studentId = student.id; this.attendanceRecords.push({ studentId: studentId, isPresent: isPresent }); }); }); console.log(JSON.stringify(this.attendanceRecords)); this.service.addAttendance(this.classId, this.attendanceForm.get('date')?.value, this.attendanceRecords).subscribe(() => { console.log('Attendance added successfully.'); console.log(this.attendanceRecords); }, error => { console.log(error); }); } 现在的问题是,假设我有两个学生,我为第一个学生选择了 present,为第二个学生选择了 absent 现在,如果我添加出勤率或换句话说调用提交方法,它会为两个学生添加 false 或 absent 作为ispresent 的值将后一个传递的值添加为 ispresent 的值,但我希望对于传递什么值的学生,应该知道我如何解决这个问题 我希望对于什么学生传递了什么价值应该保持任何想法我如何解决这个问题任何类型的帮助将不胜感激

回答 0 投票 0

如何使用 Angular 验证器使表单控件中的给定值无效?

我有一个角度反应形式,其中一个选择字段是预先选择的。 预选值不为null,也不能为null,因为这个值在其他组件中的使用方式。我...

回答 1 投票 0

以 Angular 形式添加动态控件失败

我花了很多时间在应该更简单的事情上,但我不明白错误在哪里。我只是尝试向表单添加一些动态输入控件,但失败并显示错误找不到

回答 0 投票 0

Angular Reactive Form - 如何将 FormArray 与 FormGroup(s) 一起使用

我正在尝试以我的反应形式模仿我的模型。我已经设置了一些 FormGroups 来“嵌套”根据我的模型有意义的东西。我无法设置我的组件以读取 ...

回答 1 投票 0

在 Angular13 中,FormArray 中的反应式 Form,Formgroup 的 Formcontrol minLength 不起作用

在TS 这个函数首先在 ngOnInit 中调用。 初始化表格(){ this.rangeMappingForm = this.formBuilder.group({ mappingsList: this.formBuilder.array([], Validators.required) });...

回答 0 投票 0

Angular Material 表单验证在第一次提交后停止工作。提交后如何重置表单字段和验证器?

我的目标是重置表单字段和验证器。在第一次提交表单后,它目前正在清除两者。但是你可以在没有验证的情况下再次提交。请看我的 stackblitz -

回答 2 投票 0

Angular 单元测试:如何在函数中传递 FormGroupDirective?

我正在尝试对采用 FormGroupDirective 类型参数的函数进行单元测试。我能够测试所有逻辑,但无法理解应该将什么作为参数来调用 resetForm()

回答 1 投票 0

在 Angular10 中单击“保存”按钮后在同一页面上显示响应式表单数据

我有一个反应式表单,一旦用户单击“保存”按钮,它应该在块中的同一页面上显示保存数据,一旦用户单击“提交”,它应该调用 api。 我怎样才能显示反应...

回答 0 投票 0

错误 TS7053:元素隐式具有“任何”类型,因为“控件”类型的表达式不能用于索引类型“AbstractControl<any, any>”

我的角反应形式低于误差。我有什么想念的吗?我在第二个嵌套表单中遇到错误。 错误 TS7053:元素隐式具有“任意”类型,因为

回答 1 投票 0

Angular Reactive Forms:仅去抖某些特定的表单控件

我有一个简单的搜索组件,它包含一个带有 2 个元素的反应式表单: 文本输入(搜索任意匹配文本) 复选框(包括/排除已删除的结果) 到目前为止我用

回答 8 投票 0

基于其他复选框值反应形式的角度禁用复选框

我正在尝试根据其他复选框值禁用该复选框。 只能启用其中一个。 启用其中之一时出现此错误,因为已订阅:值出现在数字中...

回答 0 投票 0

无法删除 FormArray 中 FormGroup 内的动态验证器 - Angular

要在表单数组中的表单组内设置验证器,我尝试了此链接中描述的方法: 无法在 FormArray 中的 FormGroup 内设置动态验证器 - Angular 我试过了,一个...

回答 1 投票 0

角反应式嵌套形式

我创建了一个嵌套表单,但奇怪的是,虚拟数据 json 中的参数键由 2 个对象组成,而在实际表单值中,表单中只有一个对象...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.