关于角度反应形式的问题，一种用于以反应式方式创建表格的角度技术。将此标记用于不是特定于单个Angular版本的问题。
Angular Material - 根据选择禁用单个下拉选项元素
我有一个“角度材质”下拉菜单，我需要根据从另一个下拉菜单中选择的值来禁用该下拉列表中的特定元素。 这是两个删除的 HTML...
我有一个确认密码表单控件想要验证。 当密码与确认密码输入中的值不同时，我想显示我的 mat-error 元素。为此我有一个
在 Angular Reactive 表单提交按钮上收到“ERROR TypeError：无法读取 null 的属性”，并且 Reactive 表单不起作用
我的反应式表单根本不起作用，所有验证都失败了。任何验证根本不会出现在屏幕上，并且单击“保存”按钮时会出现以下错误...
错误： 无法读取表单组中 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]， 手机：[...
我有一个带有表单控件的响应式表单，该表单控件具有禁用属性，但是当我尝试使用补丁值更改其值时，它以“未定义”结尾。 这是表格，我更改了结束日期
我有一个继承自另一个组件的组件 - @成分（{ 模板： ''， 提供者：[ { 提供：NG_VALUE_ACCESSOR， useExisting:forwardRef(() => TComp),
我想创建一个动态表单，它是付款数组，用户可以添加新付款、从数组中删除并进行编辑。 我的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 构建一个反应式表单，以使其更具可读性。 其中一个 formGroup 包含一个 formArray。我不知道我缺少什么才能使它作为儿童形式工作。我用...
在 mat 复选框中显示选中的值，并在 Angular Material 中更改其中之一时更新复选框的值
这是我第一次使用 Angular。当我选中或取消选中它时，我试图显示所有数据并更新复选框的值。下面是我的代码： 数据集.component.ts： 出口类
我想像这样在数组中设置值： this.form.controls[name].setValue('name') 但我正在使用数组形式，即使我显式传递数组索引，这也不起作用 例如，...
我的申请中有一份复杂的表格。其中一部分要求提供地址，他们必须输入实际地址。有一个复选框用于标记邮寄地址是否相同。如果...
我希望 中的输入元素具有默认值，但它不起作用！我测试了没有 的输入，它工作正常。 .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 绑定到它。
这就是我设置表单控件的方式： formMain = this.fb.group({ 详细信息： this.fb.array([ 新的表单组({ 标签：new FormControl(''), 描述：new FormControl(''), }) ]） }...
是否可以在父表单中指定验证器来覆盖自定义 CVA 的子表单？
我使用 ControlValueAccessor 创建了一个自定义 EditAddressFormComponent 表单控件。 我有一个使用地址表单控件的父表单 CompanyComponent。 有没有办法在