angular-reactive-forms 相关问题

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

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

angular inheritance angular-reactive-forms

回答 1 投票 0

我想创建一个动态表单，它是付款数组，用户可以添加新付款、从数组中删除并进行编辑。我的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

在父FormGroup中构建子FormArray

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

angular forms angular-reactive-forms formarray

回答 1 投票 0

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

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

angular typescript angular-material angular-reactive-forms

回答 1 投票 0

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

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

angular angular-reactive-forms

回答 3 投票 0

Angular 反应式表单验证问题

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

angular angular-reactive-forms

回答 1 投票 0

输入元素无法在 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

html angular angular-material angular-reactive-forms mat-form-field

回答 1 投票 0

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() 是一个应避免在模板中使用的函数，因为它们会在应用程序的每个刻度上调用。

angular angular-reactive-forms

回答 3 投票 0

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

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

javascript angular angular-reactive-forms

回答 1 投票 0

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

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

angular typescript angular-reactive-forms formarray

回答 1 投票 0

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

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