angular-reactive-forms 相关问题

角度材料：尽管有正确的方法，但垫子错误并未显示

我有一个确认密码表单控件想要验证。 当密码与确认密码输入中的值不同时，我想显示我的 mat-error 元素。为此我有一个

在 Angular Reactive 表单提交按钮上收到“ERROR TypeError：无法读取 null 的属性”，并且 Reactive 表单不起作用

我的反应式表单根本不起作用，所有验证都失败了。任何验证根本不会出现在屏幕上，并且单击“保存”按钮时会出现以下错误...

反应式表单（无法读取 null 属性错误）

错误： 无法读取表单组中 null 的属性错误。 我正在创建一个带有一些验证的反应式表单，但我收到此错误。下面是我的整个表单控件 错误： 无法读取表单组中 null 的属性错误。 我正在创建一个带有一些验证的反应式表单，但我收到此错误。下面是我的整个表单控件 <div class="container mt-5"> <form [formGroup] = 'loginForm' (ngSubmit) = 'onSubmit()' > <div class="form-group"> <label>User Name</label> <input type="text" class="form-control" placeholder="Enter User Name" formControlName = "userName" [ngClass]="{'is-invalid': ( loginForm.get('userName').dirty && !loginForm.get('userName').valid )}" > <span class="invalid-feedback"> <span *ngIf = "loginForm.get('firstName').errors?.required"> Please Enter User Name. </span> </span> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" placeholder="Password" formControlName = "password" > </div> <button type="submit" class="btn btn-primary" [disabled] = "!loginForm.valid">Submit</button> </form> {{loginForm.valid}} 查看您的代码，此错误的可能原因似乎是您正在访问firstName表单控件，但它未在loginForm中定义。 看来你的 formControlName 出了问题，要么它没有添加到 .ts 文件中，要么你错误地在错误范围中提到了“firstName” 将错误范围中的 firstName 替换为 userName 请替换此代码 - <span *ngIf = "loginForm.get('firstName').errors?.required"> Please Enter User Name. </span> 与 <span *ngIf = "loginForm.get('userName').errors?.required"> // Here is the change Please Enter User Name. </span> 天哪，花了一个小时才发现我已经 this.ContactInfoFG.get('phoneNumberFG') as FormGroup; 而不是 this.contactInfoFG.get('phoneNumberFG') as FormGroup; 只需检查此问题的字符即可！ 您的解决方案也有帮助。

Mat 表中的 Angular FormArray 输入反应形式：所需的验证器工作完美，但 @rxweb/reactive-form-validators 不知何故不行

验证器可以完美地满足要求。但我需要唯一的验证器来检查标签是否有重复的名称。 当我在 inventory.component.ts 中切换到唯一时，该表甚至不显示...

Storybook 中的 Angular FormGroup：将循环结构转换为 JSON

我正在使用角度和故事书。我的模型中有 FormGroup 和 FormArray，但它们不适用于故事书。 a.stories.ts -> 从 '@angular/common' 导入 { CommonModule } ； 导入 {

如何将动态验证器添加到角度反应表单控件

我正在使用 Angular 的反应形式。用例是使用来自 BE 的字段值和类型动态创建表单。此外，字段的验证器来自...

Angular Reactive Form - 验证在 formGroup 中不起作用

我定义了这个表单组 获取 createItem(): FormGroup { 返回 this.formBuilder.group({ 名称：[''，验证器.required]， 电子邮件：[''，验证器.required]， 手机：[...

角度中的反应式表单禁用表单控制值无法动态更改

我有一个带有表单控件的响应式表单，该表单控件具有禁用属性，但是当我尝试使用补丁值更改其值时，它以“未定义”结尾。 这是表格，我更改了结束日期

将参数传递给 Angular 中的组件提供者

我有一个继承自另一个组件的组件 - @成分（{ 模板： ''， 提供者：[ { 提供：NG_VALUE_ACCESSOR， useExisting:forwardRef(() => TComp),

在 Angular 17 中创建动态表单时出错

我想创建一个动态表单，它是付款数组，用户可以添加新付款、从数组中删除并进行编辑。 我的HTML： 我想创建一个动态表单，它是付款数组，用户可以添加新付款、从数组中删除并进行编辑。 我的 HTML： <form [formGroup]="createLoanPaymentsForm" (ngSubmit)="createLoan()"> <ng-container formArrayName="createLoanPaymentsForm"> @for ( createLoanPaymentForm of createLoanPaymentsForm.controls; // here is the error track $index ) { <div [formGroup]="createLoanPaymentForm"> <mat-form-field appearance="fill"> <input matInput formControlName="title" placeholder="Lesson title" /> </mat-form-field> </div> } <button mat-mini-fab (click)="addPayment()">Add</button> </ng-container> </form> 我的组件的配置： @Component({ selector: 'app-create-loan-dialog', standalone: true, imports: [ MatInputModule, MatButtonModule, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, ReactiveFormsModule, MatStepperModule, ], providers: [ { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true }, }, ], templateUrl: './create-loan-dialog.component.html', }) 我的FormGroup： createLoanPaymentsForm: FormGroup = this.formBuilder.group({ payments: this.formBuilder.array([]), }); 我的循环中有一个错误，它说： 输入 '{ [key: string]: AbstractControl; }' 必须有一个返回迭代器的 'Symbol.iterator' 方法。 此错误的解决方案，可能是 Angular 17 中FormArray循环的正确配置 您的反应式表单 (HTML) 结构不正确： formArrayName 与“付款”：formArrayName="payments"。 在@for循环中，您需要迭代payments.controls。 在@for循环下，用FormGroup生成每个[formGroupName]="index"实例。 <form [formGroup]="createLoanPaymentsForm" (ngSubmit)="createLoan()"> <ng-container formArrayName="payments"> @for (payment of payments.controls; track payment; let index = $index) { <div [formGroupName]="index"> ... </div> } <button mat-mini-fab (click)="addPayment()">Add</button> </ng-container> </form> get payments() { return this.createLoanPaymentsForm.controls['payments'] as FormArray; } 演示@StackBlitz

在父FormGroup中构建子FormArray

我正在尝试使用子 FormGroup 构建一个反应式表单，以使其更具可读性。 其中一个 formGroup 包含一个 formArray。我不知道我缺少什么才能使它作为儿童形式工作。我用...

在 mat 复选框中显示选中的值，并在 Angular Material 中更改其中之一时更新复选框的值

这是我第一次使用 Angular。当我选中或取消选中它时，我试图显示所有数据并更新复选框的值。下面是我的代码： 数据集.component.ts： 出口类

如何使用 Angular 以数组形式设置值

我想像这样在数组中设置值： this.form.controls[name].setValue('name') 但我正在使用数组形式，即使我显式传递数组索引，这也不起作用 例如，...

Angular 反应式表单验证问题

我的申请中有一份复杂的表格。其中一部分要求提供地址，他们必须输入实际地址。有一个复选框用于标记邮寄地址是否相同。如果...

输入元素无法在 mat-form-field 中设置默认值

我希望 中的输入元素具有默认值，但它不起作用！我测试了没有 的输入，它工作正常。 .html 我希望 <mat-form-field> 中的输入元素具有默认值，但它不起作用！我测试了没有 <mat-form-field> 的输入，它工作正常。 .html <mat-form-field appearance="fill" class="time_field"> <mat-label>{{ minute | async}}</mat-label> <input matInput type="number" formControlName="minute_glow_periodic" value="4" min="0" max="60"> </mat-form-field> .ts this.form = this.formBuilder.group({ minute_glow_periodic: new UntypedFormControl({ value: this.data.element?.minute_glow_periodic, disabled: false }), }); get minuteGlowPeriodic() { return this.form.get('minute_glow_periodic') } 我希望我的输入元素有一个默认值，但没有一个解决方案有效！ 当您使用反应式表单时，不应使用 value 属性来设置默认值。 您应该在表单控件中设置默认值，这可以通过以下任一方法完成： minute_glow_periodic: new UntypedFormControl({ value: this.data.element?.minute_glow_periodic ?? 4, disabled: false, }) 或 if (!this.minuteGlowPeriodic!.value) this.minuteGlowPeriodic!.patchValue(4); 演示@StackBlitz

Angular error 与 hasError 的用法是什么？

此为必填字段 VS 这是必填字段 VS 这是必填字段 errors如果有任何错误或 null 则返回一个对象 hasError() 在给定的验证中返回一个布尔值 使用 errors，您不需要知道可用的错误，您可以循环它们。 我制作了这个愚蠢的示例组件： 模板： <input type="text" [formControl]="form"> <span *ngIf="form.errors?.['myError']">errors shows the span</span> <span *ngIf="form.hasError('myError')">hasError shows the span</span> {{ 'hasError value ' + form.hasError('myError')}} <br> {{ 'errors value ' + form.errors?.['myError']}} 打字稿： @Component({ standalone: true, imports: [CommonModule, ReactiveFormsModule], templateUrl: './my-component.component.html', }) export class MyComponentComponent { public form = new FormControl<any>('', (control: AbstractControl) => { const numberOfLetters = (control as FormControl).value.length; return numberOfLetters === 2 ? { myError: 0} : null; }); 此代码从不显示跨度。 hasError case 始终返回 false：has error value false；当 numberOfLetters 不为 2 时，errors case 返回 null：errors value null；当 numberOfLetters 为 2 时，0：errors value 0 如果验证器返回： return numberOfLetters === 2 ? { myError: 'truthy' } : null; 那么当 numberOfLetters 不为 2 时，情况与之前相同。当 numberOfLetters 为 2 时，hasError case 返回 true，errors case 返回 'truthy'。 所以我的建议是使用 <span *ngIf="form.errors?.['myError'] !== null">errors shows the span if comparing to not null</span> 旧答案 在您给出的示例中，我没有看到任何区别，但您应该使用 <span *ngIf="myReativeForm.get('userDetails.email').hasError('required')"> 为什么？ 案例1： myReativeForm.get('userDetails.email').errors['customError'] 如果errors为null，可能会产生null异常。更好的是你应该使用 myReativeForm.get('userDetails.email').errors?.customError 但是，即使错误不为 null 并且存在 customError，您也会访问它的值，并且它可能会强制为 false。那么即使存在自定义错误，您的跨度也不会显示。 案例2： <span *ngIf="myReativeForm.get('userDetails.email').hasError('required')"> 它总是返回 true 或 false。如果存在 customError，则为 true，如果不存在，则为 false。 hasError() 是一个应避免在模板中使用的函数，因为它们会在应用程序的每个刻度上调用。

如何将 dd/mm/yyyy 日期格式应用于 Angular 中的反应式表单控件

我有一个反应式表单，其中我们使用日期的输入类型。 表单控件在循环内绑定，在这种情况下，我无法应用日期管道，因为没有 ngmodel 绑定到它。

使用formGroupName时无法编辑输入字段

这就是我设置表单控件的方式： formMain = this.fb.group({ 详细信息： this.fb.array([ 新的表单组({ 标签：new FormControl(''), 描述：new FormControl(''), }) ]） }...

是否可以在父表单中指定验证器来覆盖自定义 CVA 的子表单？

我使用 ControlValueAccessor 创建了一个自定义 EditAddressFormComponent 表单控件。 我有一个使用地址表单控件的父表单 CompanyComponent。 有没有办法在

Angular 6：设置空表单数组字段

我正在使用 Angular 6 和反应式表单生成器来构建表单。 ngOnInit() { this.landingPageForm = this.formBuilder.group({ 标题： new FormControl('', [ 验证器.required ...