angular-reactive-forms 相关问题

Angular 严格类型形式 - 为什么我不从 values 属性中获取当前值

我正在开发一个 Angular 15 应用程序，我在其中创建了一个严格类型化的表单。我遇到了一个问题，我正在尝试使用 this.formData.values.firstName 约定来获取当前值 o...

如何从子表单本身中删除嵌套的子表单？

我有一个包含 formArray 的父表单，我可以在单击调用 addForm() 的按钮时动态附加额外的 formGroups： ngOnInit() { this.signupForm = this.formBuilder.g ...

单击按钮后如何设置下拉菜单的 mat-option 默认值

` ` {{option.WorkOrder}} --> 查看作品 命令 this.workOrders = this.response.Data; this.workOrderControlOptions = this.workOrders; this.MSHRequestFormGroup.controls['MESWorkOrderControl'].setValue(this.workOrderControlOptions[0].WorkOrder; this.workOrderFilteredOptions = this.MESWorkOrderControl.valueChanges 。管道（ 从...开始（）， 映射（值 => typeof 值 === '字符串'？值：值.name）， 地图（名称=>名称？this._filterWorkOrders（名称）：this.workOrderControlOptions.slice（）） // tap(() => this.MSHRequestFormGroup.controls.MESWorkOrderControl.setValue(this.workOrderControlOptions[0].WorkOrder)) ); `

Angular Reactive 形式奇怪的行为

我正在处理这段代码： 登录.component.html 我有我正在处理的代码： 登录.component.html <div class="main"> <div class="image"> <img src="./assets/icons/login.png" alt="Login"> <p>Login in to your account</p> </div> <form [formGroup]="form" class="login" (ngSubmit)="onClick()"> <p class="error-message" style="font-size: large;" *ngIf="!isValid">Please fill the your info</p> <p>Enter your user name and password</p> <div class="userName"> <label for="userName">User name</label> <br> <input [ngClass]="{'error': emailValidation && !isValid}" type="text" id="userName" placeholder="Your user name" formControlName="email"> <p class="error-message" *ngIf="emailValidation && !isValid">please enter your user name</p> </div> <div class="pass"> <label for="pass">Password</label> <br> <input [ngClass]="{'error': passwordValidation || !isValid}" type="password" id="pass" placeholder="your password" formControlName="password"> <p class="error-message" *ngIf="passwordValidation || !isValid">please enter your user password</p> </div> <button class="btnConfig" id="btnlogin"><img src="./assets/icons/login-btn.png" alt="login"> Login</button> </form> </div> 登录.component.ts: import { AfterContentChecked, Component, DoCheck, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit, DoCheck { form!: FormGroup; isValid: boolean = true; constructor (private formBuilder: FormBuilder, private router: Router) {} ngOnInit(): void { this.form = this.formBuilder.group({ email: ['', Validators.required], password: ['', Validators.required] }); this.form.valueChanges.subscribe() } ngDoCheck(): void { this.form.valueChanges.subscribe(() => { this.isValid = this.form.valid; }); } get emailValidation() { return this.form.get('email')?.invalid || this.form.get('email')?.touched; } get passwordValidation() { return this.form.get('password')?.invalid && this.form.get('password')?.touched; } onClick() { if(this.form.valid) { this.router.navigate(['/dashboard']); } else { this.isValid = this.form.valid; } } } 现场预览 验证工作正常，直到我按下登录按钮，两个输入字段为空，错误消息显示，当我只填写一个输入时，错误消息从两个字段中消失 我试过了 ngDoCheck(): void { this.form.valueChanges.subscribe(() => { this.isValid = this.form.valid; }); } 继续检查，但错误仍然没有消失

Angular中，控件创建后如何给FormControl添加Validator？

我们有一个具有动态构建形式的组件。添加带有验证器的控件的代码可能如下所示： var c = new FormControl('', Validators.required); 但是假设我想要...

How to use FormControl with ngComponentOutlet - Angular 5

我正在尝试通过 formControl 使用动态组件加载，但它不会影响我的主机 formGroup。 尝试了这些选项： 模板： 选项 1 - 不工作： ... 我正在尝试通过 formControl 使用动态组件加载，但它不会影响我的主机 formGroup。 尝试过这些选项： 模板： 选项 1 - 不工作： <div [formGroup]="form"> <ng-container *ngComponentOutlet="getComponent()" [formControlName]="getFormControlName()"></ng-container> </div> 选项 2 - 不工作： <div [formGroup]="form"> <ng-container *ngComponentOutlet="getComponent()" [formControl]="getFormControl()"></ng-container> </div> 选项 3 - 工作： <div [formGroup]="form"> <my-dynamic-component [formControl]="dynamicFormControl"></my-dynamic-component> </div> 组件功能： getComponent：返回动态组件（支持使用reactiveForm） getFormControlName：返回表单控件名称。返回字符串 getFormControl：返回formControl对象。表单控件 有人知道我应该做什么吗？这可能吗？ 看看那个例子： https://stackblitz.com/edit/angular-n8sdrm?embed=1&file=app/app.component.html 谢谢 在 ngComponentOutlet 中添加 formControl 的任何解决方案？

如何在 Angular 15 中从 @Input() 传递 FormControl

我正在动态地使用 Angular Material Chips，并希望将 FormConrol 从任务创建组件传递到 Chips 组件，但我无法在第一次单击

如何在角度中使用异步管道创建动态表单

我正在尝试为我从 ngRx 服务获得的数据创建一个动态角度形式。 这是示例代码。 我的 html 模板看起来像 我正在尝试创建一个动态角度形式的数据，我从 ngRx 服务获得。 这里是示例代码。 我的 html 模板看起来像 <div class="padding-top-50" *ngIf="filteredParam$ | async; else loader"> <form class="row" [formGroup]="paramForm" *ngIf="paramForm"> <div class="col-sm-4 padding-top-30" *ngFor="let reportParam of formData"> <label>{{ reportParam.name | textTrimmer }}</label> <ng-container [ngTemplateOutlet]="reportParam.type === 'Date'? dateField: textField" [ngTemplateOutletContext]="{reportParam: reportParam}"> </ng-container> </div> </form> </div> <ng-template #textField let-reportParam="reportParam"> <div class="input-group"> <input #inputField type="text" [name]="reportParam.name" class="form-control" placeholder="{{ 'vrvReportTranslation.item' | cxTranslate }}" (change)="inputChanged(reportParam)" /> </div> </ng-template> <ng-template #dateField let-reportParam="reportParam"> <div class="input-group"> <input #inputField type="text" [name]="reportParam.name" class="form-control ng-datepicker" placeholder="MM-DD-YYYY" ngbDatepicker #d1="ngbDatepicker" (dateSelect)="d1.toggle();" [positionTarget]="buttonFrom" [formControlName]="reportParam.name" (change)="inputChanged(reportParam)" [firstDayOfWeek]="7" /> <button class="btn btn-outline-secondary bi-calendar3 margin-0" #buttonFrom (click)="d1.toggle();" type="button" [ngClass]="'active-btn'"> <span class="calendar-icon"></span> </button> </div> </ng-template> 我的组件文件如下所示： formData: ReportsParam[] = []; paramForm: FormGroup | undefined; filteredParam$ = this.reportService.getReportParams(); ngOnInit(): void { this.filteredParam$.subscribe(data => { // update the array in case subscription triggers again this.formData.length = 0; let formObj: { [key: string]: FormControl } = {}; const previousMonthDate = this.getLastMonthDate(); console.log(this.paramForm); if (data) data.forEach(element => { formObj[element.name] = this.formBuilder.control(''); this.formData.push(element); }) this.paramForm = this.formBuilder.group(formObj); console.log(this.paramForm); }); } 下面是我得到的错误 我知道发生错误是因为 paramForm 在创建视图后获取其值从而引发此错误，但我无法解决此问题。我不知道： 如何解决错误，检查 formObject 是否有值并不能解决问题。 为 API 创建动态表单是否是最好/正确的方法。

Angular Forms：当我更新产品时，前端不显示图像

我正在做一个教程，我已经达到了可以无缝创建产品的部分，但是当我去更新同一个产品时，图像没有更新，即使我不改变它，它也出现了 bla ...

角度反应形式设置和清除验证器

请协助，我想删除表单中的所有验证器，请告知是否可能，如果不能，如果您有一个包含 20 个或更多表单控件的表单组，那么删除验证器的更好方法是什么...

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

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

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

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

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

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

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

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

formGroup.getRawValue() 抛出角度错误

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

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> 我喜欢将组件拆分得更细... 我用这种方式可以在父表单中操作所有验证... 输入可以非常可重用，我在很多项目中都使用这种方式并取得了很好的效果。

Angular 以反应形式验证日期

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

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

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 的值，但我希望对于传递什么值的学生，应该知道我如何解决这个问题 我希望对于什么学生传递了什么价值应该保持任何想法我如何解决这个问题任何类型的帮助将不胜感激

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

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

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

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