关于角度反应形式的问题，一种用于以反应式方式创建表格的角度技术。将此标记用于不是特定于单个Angular版本的问题。
Angular - ValueChanges 不更新父表单（ControlValueAccessor）
我有以下代码 https://stackblitz.com/edit/angular-control-value-accessor-form-subscribed-val-egkreh?file=src/app/app.component.html 我已经为表单字段传递了默认值，但是
Angular - 尝试在使用反应式表单和数组时不需要最后一个表单控件 - 使用添加和删除按钮
这不太管用。 我有一个日期对（开始）和（结束）的数组，最初加载三个，并有两个按钮，添加和删除。添加按钮添加一个新的对，但前提是最后一个表单...
Angular Reactive 表单：如何重置表单状态并在提交后保留值
以 Angular 反应形式。提交成功后如何只重置表单的状态？ 这是过程： 根据服务结果创建表单并设置值 修改数值并提交表单 我...
Angular 17 - 如何将 errorStateMatcher 添加到表单数组，但要以连续索引遍历 formGroups
以下代码有效， https://stackblitz.com/edit/stackblitz-starters-wnququ?file=src%2Fmain.html 但我需要更进一步，确保索引 (x) 处的 FormGroup 的结束日期是...
我有一个像这样的父组件。 我有一个像这样的父组件。 <form [formGroup]="validateFormGroup"> <div> <mat-form-field> <input matInput placeholder="Name" maxlength="150" formControlName="name" required> </mat-form-field> </div> </form> <div class=""> <app-calendar-time-zones (getSelectedTimeZone)="setTimeZoneSelected($event)" ></app-calendar-time-zones> </div> 在 app-calendar-time-zones 组件中，这是我的 HTML 代码 <div class="calendar-container"> <mat-form-field> <mat-label>Select time zone</mat-label> <mat-select [(ngModel)]='selectedTimeZone.displayName' class='form-control' > <mat-option *ngFor="let timezone of filteredTimeZones | timezonesFilter : searchValue" [value]="timezone.id" (click)="timeZoneSelected(timezone)"> {{timezone.offset + ' ' + timezone.displayName}} </mat-option> </mat-select> </mat-form-field> </div> 在子组件 Ts 文件中，我正在设置这样的值，但其垫选择元素未设置为所选值。 this.selectedTimeZone = this.filteredTimeZones[0]; // selectedTimeZone i am getting here is this == {id: "Africa/Abidjan", displayName: "Greenwich Mean Time", useDaylightTime: false, rawOffset: 0, offset: ""} 显示以下空下拉列表。但是，如果我单击下拉图标，我就可以看到所有选项。 and in the browser if i inspect mat-select element. ngModel value is setting . 要自动选择，通过 ngModel 传递的值必须与选项的 value 匹配。 所以，我猜 selectedTimeZone.displayName 与绑定到您的选项的任何 timezone.id 都不匹配。 这对我有用 <mat-form-field> <mat-label for="">Doctor Name</mat-label> <mat-select [(ngModel)]="patientInfo.doctorName"> <mat-option value="" selected></mat-option> @for (doctor of doctorsList(); track doctor) { <mat-option [value]="doctor.name">{{ doctor.name }}</mat-option> } </mat-select> </mat-form-field>
Angular - 使用电话指令将值粘贴到控件以格式化值时，验证器不起作用
我们在项目中使用 Angular 17 和响应式表单。 我们编写了一个自定义指令，将输出格式化为美国电话号码格式 111-222-3333。 我们看到的是，当
复制时带有验证器的 Angular Phone 指令不起作用
我们在项目中使用 Angular 17 和响应式表单。 我们编写了一个自定义指令，将输出格式化为美国电话号码格式 111-222-3333。 我们看到的是，当
我需要创建一个可重用的表单对话框来可视化不同的表单。我正在使用 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
导航到同一页面后，无法订阅 NgOnInit 中可观察的表单控件 valueChanges
我有一个使用不同参数导航到自身的页面。这使得 NgOnInit 不会再次执行。可悲的是，在 NgOnInit 中，我订阅了一个可观察的对象来处理值变化，我...
验证表单中是否至少填写了一个字段（复选框或其他文本字段），如果两者都为空，则在 Angular 中显示错误？
要验证表单中是否至少填写了一个字段（复选框或“otherText”字段），请为表单组创建一个自定义验证器。该验证器将检查是否在...
我有一个父组件：父列表包含两个子组件（第一个子列表，第二个子列表） 在第二个子列表组件中：我有一个 mat 表，用于接收要显示的数据...
@for 在removeAt(index) 上的表单表现得很奇怪
编辑：稍微改进了 stackblitz，以便人们可以并排比较它。 在 Angular 17+ 中，我想使用新的模板语法来迁移我的项目，这似乎有一个奇怪的行为......
打字稿 formGroup = this.fb.group({}); 构造函数（私有只读 formBuilder：UntypedFormBuilder）{} ngOnInit() { this.setControls(); } settControls() { this.formGroup.addControl('名称', t...
所以，我有一个问题，我有一个带有表单的基础组件。但我希望能够向其中添加另一个字段。为什么？因为我有四个页面，结构非常相似，但有所不同......
如何将额外参数传递给 Angular 中的异步验证器（反应式表单）？
我有以下异步验证器。如果我想将它用于反应形式，我必须将它作为第三个参数传递 slug: [null, [Validators.required], [CustomValidators.slug]], 我怎样才能通过额外的
在严格模式下使用 Angular 11 和 Typescript 4 我有： 导出类 ContactComponent 实现 OnInit { 表单：表单组； 构造函数（私有formBuilder：FormBuilder）{} ngOnInit() {...
如何使用 ssr 应用程序使我的 formControlName 在 Angular 17 的子输入组件中工作
我收到此错误： main.ts:6 ERROR 错误：NG01050：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并向其传递现有的 FormG...
我尝试创建一个 stackblitz 来展示我正在谈论的内容，但我根本无法让它工作，所以我只能寻求帮助。我有 2 个组件： 组件 1 是自定义表单
如何在不声明的情况下将 FormArray 添加到 FormGroup 中，并以编程方式添加
我试图学习为传递 json 的表单创建通用模板，将定义 所呈现的表的结构。 我无法将控件和表单数组添加到 fromGroup
我正在研究 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