angular-reactive-forms 相关问题

获取表单控件的名称

我正在以角度处理反应式表单，我需要将开始日期“开始日期”与结束日期“结束日期”进行比较，两个控件都在“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 中发生了一些事情......

如何在 Angular 中将表单组的表单数组从父组件绑定到子组件？

需要任何从事过角度反应形式工作的人的帮助。我有一个父组件和 3 个子组件 在父组件中，我有一个如下所示的表单： 家长表格： 形式...

删除角度反应形式的验证器不起作用

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

将预填充值传递给 Angular 2 反应式表单输入的方法是什么

从 '@angular/core' 导入 { Component, OnInit }; 从 '@angular/forms' 导入 { FormControl, FormGroup, Validators }; 从'../account.interface'导入{用户}； 从 '../angularf... 导入 { AF }

Angular Validators.pattern() 不适用于 type="number"，适用于 type="text"

我有以下输入元素，用于在 Angular 18 应用程序中输入（部分）电话号码以及关联的 Validators.pattern(/^[1-9]\d{5,}/)： ... 表单 = this.formBuilder.group({

在 Angular 2 中创建可选的嵌套表单组

我正在尝试在 Angular 2 中实现模型驱动的形式。我的数据模型的结构如下： 存档（表单组） 名称（表单控件） 描述（表单控件） 连接（

为什么此自定义 Angular 控件中的验证错误在父组件的表单中看不到？

我正在 Angular (16) 中开发我的第一个自定义控件，用于反应式表单，其中包含滑块和输入。如果滑块为真，则输入应该有一个值。如果不是，那么我...

Angular Reactive Form - 使用对象而不是值修补表单控件时出现问题

我在 Angular 表单中使用 mat-select 来让用户选择多个国家/地区作为具有 id 和 name 属性的对象。但是，我需要用完整的国家/地区对象来修补表单控件...

使用对象而不是 Angular 响应式表单中的值来修补表单控件的问题

我在 Angular 表单中使用 mat-select 来让用户选择多个国家/地区作为具有 id 和 name 属性的对象。但是，我需要用完整的国家/地区对象来修补表单控件...

Angular 父表单 + childForm

我有一个问题，我也没有找到答案，我很好奇你们中是否有人遇到过这个。 想象一下有一个 ParentForm 和一个 ChildForm。 Child 和 Parent 都是一个 Angular Component。 家长F...