angular-reactive-forms 相关问题

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

我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义一个这样的表单：我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 Angular 17 和 Angular Material。在我的组件中，我试图定义这样的形式： <form #myForm="ngForm" (ngSubmit)="submitForm(myForm)"> <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date" name="date" ngModel required> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> <mat-error *ngIf="myForm.controls.date.invalid && myForm.controls.date.touched">Please choose a date.</mat-error> </mat-form-field> <mat-form-field> <input matInput placeholder="First Name" name="firstName" ngModel required> <mat-error *ngIf="myForm.controls.firstName.invalid && myForm.controls.firstName.touched">Please enter a first name.</mat-error> </mat-form-field> <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid">Submit</button> </form> 在我的 .ts 文件中，我有一个打开对话框的方法： @ViewChild('myForm', { static: true }) public myForm: ElementRef; public openDialog(): void { const dialogRef = this.dialog.open(FilterFormDialogComponent, { width: '460px', disableClose: true, autoFocus: false, panelClass: 'form-dialog', data: { form: this.myForm // reference to the form previously defined }, }); } 在我的filterFormDialogComponent中，我尝试使用ng-content在其html中可视化插入的表单。但是，我无法想象该表格。是否可以使用 MAT_DIALOG_DATA 将表单或其他组件传递到对话框中？如果是这样，如何将其正确显示到对话框的html中？您正在将 FormGroupDirective 传递到对话框。您可以尝试像这样在对话框数据中传递表单 form: this.ngForm.form

javascript angular dialog modal-dialog angular-reactive-forms

回答 1 投票 0

导航到同一页面后，无法订阅 NgOnInit 中可观察的表单控件 valueChanges

我有一个使用不同参数导航到自身的页面。这使得 NgOnInit 不会再次执行。可悲的是，在 NgOnInit 中，我订阅了一个可观察的对象来处理值变化，我...

angular rxjs angular2-routing angular-reactive-forms angular-observable

回答 1 投票 0

验证表单中是否至少填写了一个字段（复选框或其他文本字段），如果两者都为空，则在 Angular 中显示错误？

要验证表单中是否至少填写了一个字段（复选框或“otherText”字段），请为表单组创建一个自定义验证器。该验证器将检查是否在...

html angular forms frontend angular-reactive-forms

回答 1 投票 0

在可观察对象内创建的垫表内形成数组

我有一个父组件：父列表包含两个子组件（第一个子列表，第二个子列表）在第二个子列表组件中：我有一个 mat 表，用于接收要显示的数据...

javascript angular rxjs angular-material angular-reactive-forms

回答 1 投票 0

@for 在removeAt(index) 上的表单表现得很奇怪

编辑：稍微改进了 stackblitz，以便人们可以并排比较它。在 Angular 17+ 中，我想使用新的模板语法来迁移我的项目，这似乎有一个奇怪的行为......

angular angular-reactive-forms angular-forms

回答 1 投票 0

如何迭代formbuilder.group控件？

打字稿 formGroup = this.fb.group({}); 构造函数（私有只读 formBuilder：UntypedFormBuilder）{} ngOnInit() { this.setControls(); } settControls() { this.formGroup.addControl('名称', t...

angular typescript angular-reactive-forms

回答 1 投票 0

如何通过模板outlet动态添加formControls？

所以，我有一个问题，我有一个带有表单的基础组件。但我希望能够向其中添加另一个字段。为什么？因为我有四个页面，结构非常相似，但有所不同......

angular angular-reactive-forms angular-formbuilder angular-signals

回答 1 投票 0

如何将额外参数传递给 Angular 中的异步验证器（反应式表单）？

我有以下异步验证器。如果我想将它用于反应形式，我必须将它作为第三个参数传递 slug: [null, [Validators.required], [CustomValidators.slug]], 我怎样才能通过额外的

angular angular-reactive-forms angular-validation

回答 2 投票 0

在响应式表单中在哪里初始化 FormGroup？

在严格模式下使用 Angular 11 和 Typescript 4 我有：导出类 ContactComponent 实现 OnInit { 表单：表单组；构造函数（私有formBuilder：FormBuilder）{} ngOnInit() {...

angular typescript angular-reactive-forms angular11

回答 2 投票 0

如何使用 ssr 应用程序使我的 formControlName 在 Angular 17 的子输入组件中工作

我收到此错误： main.ts:6 ERROR 错误：NG01050：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并向其传递现有的 FormG...

angular forms server-side-rendering angular-reactive-forms angular17

回答 1 投票 0

如何将 ng-select 包装在自定义表单控制器中？

我尝试创建一个 stackblitz 来展示我正在谈论的内容，但我根本无法让它工作，所以我只能寻求帮助。我有 2 个组件：组件 1 是自定义表单

angular angular-reactive-forms angular-ngselect

回答 1 投票 0

如何在不声明的情况下将 FormArray 添加到 FormGroup 中，并以编程方式添加

我试图学习为传递 json 的表单创建通用模板，将定义所呈现的表的结构。我无法将控件和表单数组添加到 fromGroup

angular angular-reactive-forms

回答 1 投票 0

带有其他选项的单选按钮

我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。 <p> <label for="favFruit"><b>What's your favorite fruit</b></label> <br /> <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" /> Apple <br /> <input type="radio" value="Banana" id="favFruit" name="favFruit" formControlName="favFruit" /> Banana <br /> <input type="radio" value="Orange" id="favFruit" name="favFruit" formControlName="favFruit" /> Orange <br /> <input type="radio" value="Pear" id="favFruit" name="favFruit" formControlName="favFruit" /> Pear <br /> <input type="radio" value="Grapes" id="favFruit" name="favFruit" formControlName="favFruit" /> Grapes <br /> <input type="text" value="" id="favFruit" name="favFruit" formControlName="favFruit" /> </p> 我尝试过添加另一个值作为文本输入字段，但是，这允许用户选择多个选项。我希望当用户单击“其他”（选项）时弹出，以便用户可以选择其他，但这将是他们唯一的选择。我建议用于填充其他值的 <input> 元素不要使用 formControlName 指令。当输入文本字段时，它应该更新 favFruit 控制值，这会导致取消选中之前选中的单选按钮。 <input type="text" value="" id="favFruit" name="favFruit" #otherFavFruit (input)="onOtherFavFruitInput(otherFavFruit.value)"> onOtherFavFruitInput(value: string) { this.form.controls.favFruit.setValue(value); } 另一种情况是，当您在文本字段中输入其他值时，您改变主意并选择其中一个单选按钮，您可以使用 (change) 事件来重置输入字段。 <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> import { Component, ElementRef, ViewChild } from '@angular/core'; @ViewChild('otherFavFruit') otherFavFruit!: ElementRef<HTMLInputElement>; onFavFruitChecked(event: any) { this.otherFavFruit.nativeElement.value = ''; } 请注意，您可以使用 *ngFor 生成一组表单控件，旨在减少 HTML 中的代码。 <ng-container *ngFor="let fruit of fruits"> <input type="radio" [value]="fruit" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> {{ fruit }} <br> </ng-container> fruits = ['Apple', 'Banana', 'Orange', 'Pear', 'Grapes']; 演示@StackBlitz

angular forms radio-button angular-reactive-forms

回答 1 投票 0

如果我在 mat-dialog 中单击取消提交按钮，如何取消选中 mat-checkbox

我编写了一个对话框，其中包含要从表中删除的所有选定行。现在，当我提交对话框时，我希望也取消选中激活的复选框。最好的方法是什么...

angular typescript angular-material angular-reactive-forms

回答 2 投票 0

如何使此密码匹配验证工作

我有这个代码来检查两个密码是否匹配，但是，它没有按预期工作。我已经尝试过在一些旧问题中看到的内容，但没有成功。我的组件模板中有这个...

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

回答 1 投票 0

带有嵌套 FormGroup 的 FormArray。如何访问嵌套的表单组控件？

我有一个包含 3 个 FormGroup 的 FormArray，每个表单组有 2 个控件。我不确定如何访问表单组中的控件来设置表单控件名称。设置表格这个.form = ...