angular-reactive-forms 相关问题

如何动态更新与 Angular 中特定类关联的表单字段？

我正在 Angular 中开发一个动态表单，其中表单字段按类别分组，每个组都与一个特定的类相关联（例如 Revenue、Loyer、Epargne）。我正在想办法

Angular ng-select：通过绑定到对象进行预选在获得焦点之前不起作用

我在 Angular 应用程序中遇到了 ng-select 组件的问题。 当我使用反应式表单将对象绑定到 formControlName 并为表单控件设置初始值时，该值不是

如何在组件销毁时销毁反应式 FormControl？

我有一个带有 FormControl 的组件并订阅其值更改： @成分（...） 导出类 FooComponent 实现 OnInit、OnDestroy { fooFormControl: 表单控件； ... ngOnIni...

如何创建表单控件的值更改检测，该表单控件位于角度 18 中另一个表单组的表单数组内

我有一个带有 FormArray 的表单，可以动态添加具有多个字段的行，包括单位、数量和备注。这是我的模板的一个片段，我在其中循环访问 unitDetails FormArray...

Angular 5模板表单检测表单有效性状态的变化

为了让组件能够侦听其包含的表单的有效性状态的变化并执行某些组件的方法，响应式表单是一种可行的方法吗？ 很容易禁用...

以角度反应形式使用自定义验证器

我正在尝试使用自定义验证器来比较结束时间是否大于开始时间。 代码： 函数 timeValidator(): ValidatorFn { 返回（控制：AbstractControl）：{[键：字符串]：

删除反应式形式的验证器 Angular

我有一个条件，如果为真，我想为某些表单添加一系列验证，当条件不为真时，它将删除验证器。 现在，当我添加验证器时，它就可以工作了

Angular：“注射器已被摧毁。”

带有表单的 Angular 应用程序突然开始报告此错误： 运行时错误：NG0205：注射器已被破坏。 如何找到罪魁祸首？

使用 tituloQueHacer 编辑“Cruceros”，返回键值对：“descripcion：value”而不是数组中的字符串

我不知道为什么会发生这种情况，我已经尝试了很多方法，但无法解决这个问题。问题是，例如，如果我编辑我的“Crucero”并将 tituloQueHacer 从 &q 更改...

获取表单控件的名称

我正在以角度处理反应式表单，我需要将开始日期“开始日期”与结束日期“结束日期”进行比较，两个控件都在“dateLessThan”函数中进行验证，但问题是.. .

如何在没有 NgModules 的情况下在 Angular 18 中使用反应式表单

我正在使用 Angular 18 构建一个新应用程序。 > NG版本 ... 角度 CLI：18.2.12 ... 它是一个独立的应用程序（带有路由），没有 NgModules 也没有 app.modules.ts 文件。 我想使用反应式表单......

使用 formControlName 和 ngModel 的 Angular 6 警告

我最近将 Angular 版本升级到 6-rc。我收到以下警告 看来您在同一表单字段上使用 ngModel 表单控件名称。支持使用 ngModel 输入属性...

带有分组复选框面板的角度反应形式

来自如下动态 Json [ { "label": "一般", “数据”： [ { "title": "参数.设备信息....

如何将嵌套的角度形式标记为触摸实现ControlValueAccessor？

Angular University 有一个示例，说明如何将嵌套表单与 ControlValueAccessor 一起使用。 他们创建一个单独的表单组件并将其用作子表单： Angular 大学提供了示例如何将嵌套表单与 ControlValueAccessor 结合使用。 他们创建一个单独的表单组件并将其用作子表单： <div [formGroup]="form"> ... other form controls <address-form formControlName="address" legend="Address"></address-form> </div> 如果我在父窗体上调用 markAllAsTouched 方法，我希望将嵌套窗体的所有字段标记为触摸。 <form [formGroup]="form"> <app-address-form formControlName="address"></app-address-form> </form> <button (click)="markAsTouched()">Mark as touched</button> export class AppComponent { public form: FormGroup; constructor(private fb: FormBuilder) { this.form = fb.group({ address: fb.control({ city: '' }) }); } public markAsTouched() { this.form.markAllAsTouched(); } } 可以使用这种方法吗？ 我在 StackBlitz 上构建了一个 简化版本。 单击按钮时实际发生的情况是将应用程序地址表单标记为已触摸： <app-address-form formcontrolname="address" class="ng-pristine ng-valid ng-touched"> ... </app-address-form> 但我想将其传播到子表单及其字段。 我找到了以下将 markAsTouched 传播到子控件的解决方案。 以下递归函数有帮助： const updateFormControlTree = (abstractControl: AbstractControl): void => { const forEachChildControl = ( control: AbstractControl, callbackFunction: (abstractControl: AbstractControl) => void): void => { const childControls = (control as AbstractControl & { controls?: [] }).controls; if (!childControls) { return; } if (typeof childControls === 'object') { const extractedChildControls: AbstractControl[] = Object.values(childControls); extractedChildControls.forEach((childControl) => { callbackFunction(childControl); }); } }; forEachChildControl(abstractControl, (control: AbstractControl) => updateFormControlTree(control) ); abstractControl.markAsTouched(); }; 我必须使用上面的函数覆盖控件的markAsTouched。为此，我需要 FormControl 而不是 formControlName 属性： <app-address-form [formControl]="addressControl"></app-address-form> 这就是我可以重写该函数的方法： export class AddressFormComponent implements ControlValueAccessor, Validator, OnInit { @Input() formControl!: FormControl; public ngOnInit(): void { this.formControl.markAsTouched = () => updateFormControlTree(this.form); } ... } 最后要做的是将我的控件标记为从父窗体中触摸： export class AppComponent { public addressControl = new FormControl(); public form: FormGroup = this.fb.group({ address: this.addressControl, }); constructor(private fb: FormBuilder) { } markAsTouched() { this.addressControl.markAsTouched(); } } 我在 StackBlitz 上构建了一个 工作示例。 附注上述解决方案的灵感来自于 Angular Framework 源代码中的更新值和有效性的方法。这个方法是私有的。不过如果能公开就好了。 可能有更好的方法，但是，您可以通过使用 Input 来实现这一点 父组件ts export class AppComponent { public form: FormGroup; setAsTouched: boolean = false; constructor(private fb: FormBuilder) { this.form = fb.group({ address: fb.control({ city: '' }) }); } public markAsTouched() { this.setAsTouched = true; } } 父模板组件 <h1>Form</h1> <form [formGroup]="form"> <app-address-form formControlName="address" [mark]="setAsTouched" ></app-address-form> </form> <button (click)="markAsTouched()">Mark as touched</button> 子组件 ts ... ... export class AddressFormComponent implements ControlValueAccessor, Validator { @Input() set mark(isTouched: boolean) { if (isTouched) { this.form.markAllAsTouched(); } } ... ... ... } 实际上，解释链接的嵌套表单组的管理有点混乱，因为您确实没有有嵌套表单组。你有一个带有一个控件的 FormGroup（控件的值是一个对象，但你只有一个控件） 看到在你的例子中你写的是： this.form = fb.group({ address: fb.control({ city: '' }) }); 嵌套的 formGroup 应该是这样的： this.form = fb.group({ address: fb.group({ city: '' }) }); 但是这个formGroup不能像Angular大学所说的那样进行管理。方法很简单：使用组件并将 formGroup 作为 Input(*) 传递 这就是因为只触碰了“控制”的原因 解决方案：您可以使用模板引用变量并传递给您的函数 <form [formGroup]="form"> <app-address-form #address formControlName="address"></app-address-form> </form> <button (click)="markAsTouched(address)">Mark as touched</button> public markAsTouched(address:any) { this.form.markAllAsTouched(); //see that you can access to the form of the "adress" simply //using adress.form address.form.markAllAsTouched() } (*) 组件（不是从 ControlValueAccesor 实现）只是 @Component({ selector: 'app-address-form', template: ` <div [formGroup]="form"> <label>City</label> <input formControlName="city" (blur)="onTouched()"> </div> ` }) export class AddressFormComponent { form:FormGroup @Input('form') set _(value){ this.form=value as FormGroup } } 你用as <app-address-form [form]=form.get('address')><app-address-form> 这在 Angular 18+ 中可以使用 formControl.events observable 实现。 parentControl.events .pipe( filter(e => e instanceof TouchedChangeEvent), filter(e => e.touched), tap(() => childControl.markAllAsTouched()) ).subscribe()

Angular 18 FormBuilder 错误属性未初始化

我正在 Angular 18 中做一个 Dummy，我正在使用 Reactive Forms，并且我正在尝试实现 FormBuilder 我的 .ts 中有这个构造函数 构造函数（私有构建器：FormBuilder）{ } 然后我尝试

Angular Material - 带电子邮件验证的芯片

我正在尝试创建一个带有输入的表单，使用芯片将消息发送到各种电子邮件。我几乎可以使用它，但我不知道当您编写 inva 时如何正确显示消息错误...

NG-ZORRO - 禁用上一个日期

HTML： 发行日期 HTML： <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" > </nz-date-picker> </div> ts： initializeForm() { this.purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl('', Validators.compose([ Validators.required, ])), }); } 我想根据 issue_date 禁用之前的日期。 如果 issue_date 是“05-05-2024”，那么在 delivery_date 上它将禁用 issue_date 的前一个日期。如果我更改它，它也将起到禁用先前日期的作用。 [n.b: issue_date 默认值是第一次设置为当前日期，因此用户可以根据需要更改它，但如果不更改它将设置为当前日期] 您可以向 [nzDisabledDate] 提供包含禁用日期逻辑的功能到您的 delivery_date 日期选择器。 <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDeliveryDate" > </nz-date-picker> disabledDeliveryDate = (date: Date): boolean => { let issueDate = this.purchaseOrderForm.controls.issue_date.value; if (!issueDate || !date) { return false; } return date.getTime() <= new Date(issueDate).getTime(); }; 演示@StackBlitz 您需要使用 nzDisabledDate 属性并提供一个函数，该函数返回一个布尔值，确定是否需要禁用/启用日期。下面是工作示例！ HTML <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> TS disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; 完整代码： import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { differenceInCalendarDays, setHours } from 'date-fns'; import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker'; @Component({ selector: 'nz-demo-date-picker-disabled-date', template: ` <form [formGroup]="purchaseOrderForm"> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Issue Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date"> </nz-date-picker> </div> <div class="col-sm-6 col-md-3 form-group"> <div class="label-mini"> <span>Delivery Date</span> </div> <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="delivery_date" [nzDisabledDate]="disabledDate" > </nz-date-picker> </div> </form> `, styles: [ ` nz-date-picker, nz-range-picker { margin: 0 8px 12px 0; } `, ], }) export class NzDemoDatePickerDisabledDateComponent { purchaseOrderForm = new FormGroup({ issue_date: new FormControl(new Date().toISOString()), delivery_date: new FormControl( '', Validators.compose([Validators.required]) ), }); disabledDate = (current: Date): boolean => { const issueDateCtrl = this.purchaseOrderForm.get('issue_date'); const issueDateValue = issueDateCtrl?.value || null; // Can not select days before today and today return issueDateValue ? differenceInCalendarDays(current, new Date(issueDateValue)) < 0 : false; }; } Stackblitz 演示

在 Angular 2 中设置下拉列表的选定值

vatCodeList 是字符串代码错误。 示例：['34u'、'23'、'tt'] 需要在那里设置所选值。 vatCodeList 是字符串代码错误。 示例：['34u' , '23' ,'tt'] 需要在那里设置所选值。 <select class="custom-select" formControlName="vatCode"> <option *ngFor="let i of vatCodeList">{{i}}</option> </select> 在你的*.component.ts里面 public vatCode: any; 在 *.component.ts 内，您可以将 vatCode 的值设置为 vatCodeList 中包含的值之一，这将更新所选值。 里面*.component.html <select class="custom-select" formControlName="vatCode" [(ngModel)]="vatCode"> <option *ngFor="let i of vatCodeList">{{i}}</option> </select> 你可以像这样绑定 value 属性 <option [value]="i" *ngFor="let i of vatCodeList">{{ i }}</option> 您可以尝试在选项标签中添加表达式来制作选项selected <select class="custom-select" formControlName="vatCode"> <option *ngFor="let i of vatCodeList" {{i == vatCode?'selected':'' }}>{{i}}</option> </select> 该变量应引用 InputControl 的值。使用反应形式可以很容易地提取价值并将其表达出来。 使用 ngModel 将元素绑定到模型的最简单方法，但您可以检查 this 解决方案是否有帮助。

使用 Angular Materials 的 Angular 17 Reactive 形式存在问题

我是一名初学者，正在尝试使用 Angular Materials 在 Angular 17（独立组件）中构建反应式表单。目前，我有一个名为“ReservationComponent”的父组件，其中...

formArray 中的值未定义

我有表单数组，由于某种原因，我在应用程序输入组件中看不到任何值。如果我定义简单的 formGroup 控件并传递给应用程序输入，我可以看到值。但在 formarray 中发生了一些事情......