angular-reactive-forms 相关问题

错误：无法读取表单组中 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; 只需检查此问题的字符即可！您的解决方案也有帮助。

html angular angular-reactive-forms

回答 3 投票 0

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

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

angular typescript angular-material angular-reactive-forms angular-validation

回答 1 投票 0

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

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

angular angular-reactive-forms storybook angular-storybook

回答 3 投票 0

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

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

javascript angular typescript angular-reactive-forms

回答 1 投票 0

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

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

angular typescript angular-reactive-forms formgroups angular-validation

回答 2 投票 0

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

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

angular-reactive-forms angular11

回答 1 投票 0

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

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

angular inheritance angular-reactive-forms

回答 1 投票 0

在 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

angular typescript angular-reactive-forms formarray angular17

回答 1 投票 0

angular-reactive-forms 相关问题

最新问题