angular2-forms 相关问题

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

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

如何使用新的输入API [Angular19]从ControlValueAccessor接口实现setDisabledState

尝试运行新输入 API 的迁移（启用 --insert-todos）后，我的自定义文本输入组件如下所示： 文本输入.component.ts 导出类 TextInputComponent 实现...

Angular 2 中模型驱动的表单验证问题

在 Angular 2，使用表单生成器的模型驱动表单中，我有： ngOnInit() { this.user = this.fb.group({ id: ['', [Validators.required, Validators.minLength(2)]], 名称：[''，[有效...

自定义密码匹配验证器在 angular5 中不起作用

我正在实现自定义验证器来匹配组件中的密码。 这是我的 component.ts 表单声明 this.addUserForm = 新的 FormGroup({ 名字：new FormControl('', [Validators.req...

Angular 如何使 [formControl] 成为可选字段

在 Angular 中，您可以向输入添加属性，并使用 attr 将其设置为可选： 但是如何使表单控件成为可选的呢？我想要

Angular 2 嵌套自定义组件中没有 FormGroupDirective 的提供者

在 Angular 2 RC.5 中我找不到上述错误的修复： 未处理的 Promise 拒绝：模板解析错误： 没有 FormGroupDirective 提供程序（“p>自定义开始 ... 在 Angular 2 RC.5 中我找不到上述错误的修复： Unhandled Promise rejection: Template parse errors: No provider for FormGroupDirective ("p>Custom begin </p> <p>Host contains {{hostFormGroup.directives.length}} directives</p> [ERROR ->]<nested></nested> <p>Custom end </p> </div> "): CustomComponent@4:6 ; Zone: <root> ; Task: Promise.then ; Value: 当嵌套在另一个自定义组件中的自定义组件依赖于包含 @Host() hostFormGroup: FormGroupDirective 时，就会发生这种情况。 这里有一个 plunker 显示了该场景。 AppComponent 显示了一个反应式/模型驱动的表单（暂时没有控件，但这在这一点上并不重要），其中包含 CustomComponent，而后者又有一个 NestedComponent。请参阅开发者控制台了解错误详细信息。 第一级自定义组件可以依赖于托管 FormGroupDirective 或不依赖，这不会影响问题。如果它具有依赖性，则可以正确解决。无论第一级组件如何，第二级自定义组件都不会发生同样的情况。 如果直接在AppComponent中使用相同的NestedComponent，问题就会消失。 我错过了什么？ TA 主要部分代码如下，供参考： import { Component, Host } from '@angular/core'; import { REACTIVE_FORM_DIRECTIVES, FormBuilder, FormGroup, FormGroupDirective } from '@angular/forms'; /////////////////////// // Nested @Component({ selector: 'nested', template: ` Nested begin<br/> Nested end <br/> `, }) class NestedComponent { constructor( @Host() private hostFormGroup: FormGroupDirective) { } } /////////////////////// // Custom @Component({ selector: 'custom', template: ` Custom begin <br/> <nested></nested> <br/> Custom end <br/> `, directives: [NestedComponent], }) class CustomComponent { constructor( @Host() private hostFormGroup: FormGroupDirective) { } } /////////////////////// // App @Component({ selector: 'my-app', template: ` <h1>Angular 2 - @Host() issue</h1> <form [formGroup]="mainForm" accept-charset="UTF-8" role="form"> <fieldset> <custom></custom> </fieldset> </form> `, directives: [REACTIVE_FORM_DIRECTIVES, CustomComponent], }) export class AppComponent { constructor(formBuilder: FormBuilder) { this.mainForm = formBuilder.group({}); } } 错误消息会为您指明正确的方向。 您需要声明 FormGroupDirective 是提供商。 即 @Component({ ... providers: [FormGroupDirective] }); 否则，您需要在更高级别声明它，例如在您的模块中，这样您就可以在模块范围内使用它。 删除 @Host() 装饰器和额外的提供程序，它就可以工作了。 @Component({ selector: 'nested', template: ` <div> <p>Nested begin </p> <p>Host contains {{hostFormGroup.directives.length}} directives:</p> <span *ngFor="let directive of hostFormGroup.directives">{{directive.name}}</span> <p>Nested end </p> </div> `, // tried this: no error, but injected one is not the actual container // and it containes no directive // without it: still same error 'No provider for FormGroupDirective' //providers: [FormGroupDirective], }) class NestedComponent { constructor( private hostFormGroup: FormGroupDirective) { } } // Custom @Component({ selector: 'custom', template: ` <div> <p>Custom begin </p> <p>Host contains {{hostFormGroup.directives.length}} directives:</p> <span *ngFor="let directive of hostFormGroup.directives">{{directive.name}}</span> <nested></nested> <p>Custom end </p> </div> `, directives: [NestedComponent], // tried this: still same error 'No provider for FormGroupDirective' //providers: [FormGroupDirective], }) class CustomComponent { constructor( private hostFormGroup: FormGroupDirective) { } } http://plnkr.co/edit/ktvnjm?p=preview 就我而言，我所有的导入和表单初始化都是正确的，只是我错误地将相同的 formControlName 给了 2 个不同的输入，这就是 NullInjectorError: No provider for FormGroupDirective! 的原因

这里的#auto属性是什么以及为什么需要它

我正在尝试学习 Angular Material 2，并在自动完成中遇到了这个 #auto 属性。我知道 auto 可以替换为任何文本，但是为什么在 auto 之前需要一个 # 以及什么...

如何将属性从角度反应形式映射到仅具有类成员属性的对象？

我尝试使用 (Object.Assign) 将反应式表单属性映射到对象类，但它添加了不属于该类或接口的额外属性，例如： 导出接口 MyInterface {...

Angular 2 依赖于另一个表单控件的自定义验证器

我正在尝试为我的 FormControl MealType 制作自定义验证器 如果我的 FormControl 类别有值而mealType 没有，则mealType 应该无效。 如果类别没有值，mealType 应该...

最大长度不适用于 Angular 2 Plus 版本

我正在开发一个应用程序，我正在实现最大长度，但它不起作用。下面是我的实现 TS this.customPaymentForm = new FormGroup({ 金额：新的 FormCont...

Angular2为formGroup设置值

所以我有一个用于创建实体的复杂表单，我也想用它进行编辑，并且我正在使用新的角度表单 API。我的表单结构与我从数据库中检索的数据完全相同，所以......

Angular 2 - 浏览器自动填充时表单无效

我有一个登录表单，其中包含电子邮件和密码字段。 我选择了浏览器自动填充。 问题是：当浏览器自动填写登录表单时，两个字段都是原始且未受影响的，因此提交

提交并重置表单后在输入元素中设置焦点

我正在使用 angular2 的模板表单组件，提交表单后无法在我的名字输入元素中设置焦点。表单重置正常，但无法设置焦点。

为什么“清除”按钮未在 mat-form-field 输入上呈现？

我有以下输出，我可以看到 HTML 被呈现为字符串而不是被评估。 我需要检查的是，当文本框中存在输入内容时，它应该给我一个“

为什么“清除”按钮未在角度材料形式“Mat-Form-Field”输入上渲染？

我有以下输出，我可以看到 HTML 被呈现为字符串而不是被评估。 我需要检查的所有内容，如果文本框中存在输入内容，它应该给我“清除”标志...

错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令 - Angular 反应式表单

我有以下模板。我正在尝试掌握反应形式，但遇到了问题。 我有以下模板。我正在尝试掌握反应形式，但遇到了问题。 <form [formGroup]="guestForm" novalidate> <div class="panel-body"> <form> <div class="col-md-12 col-sm-12"> <div class="form-group col-md-3 col-sm-6"> <label>First Name* </label> <input formControlName="firstname" type="text" class="form-control input-sm"> </div> </div> </form> </div> </form> 然后在我的组件中我有： @Component({ selector: 'guest-input', templateUrl: './guest-input.component.html', }) export class GuestInputComponent implements OnInit { @Input() guest: Guest; guestForm: FormGroup; constructor(private _fb: FormBuilder) { } ngOnInit() { this.guestForm = this._fb.group({ firstname: ['test', [Validators.required, Validators.minLength(3)]] }); } } 这一切对我来说看起来都很好，但出于某种原因我得到： 错误：未捕获（承诺中）：错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并向其传递一个现有的 FormGroup 实例（您可以在类中创建一个实例）。 我以为我已经在我的<form>中声明了这一点。 您在表单标签内嵌套了带有 FormGroup 指令的表单标签，请将其删除： <form [formGroup]="guestForm" novalidate> <div class="panel-body"> <form> -> Remove this <div class="col-md-12 col-sm-12"> <div class="form-group col-md-3 col-sm-6"> <label>First Name* </label> <input formControlName="firstname" type="text" class="form-control input-sm"> </div> </div> </form> -> Remove this </div> </form> 在 modelDrivenForms 中，[formGroup]="guestForm" 应该位于父元素中 <div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm"> <label>First Name* </label> <input formControlName="firstname" type="text" class="form-control input-sm"> </div> 当您在没有 formGroup 的情况下进行表单控制时。 错误代码： <ul class="list-unstyled noti-list m-0"> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input formControlName="promotionMaterial" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="promotionMaterial" type="checkbox" /> <label class="tgl-btn m-0" for="promotionMaterial"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input formControlName="offer" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="offer" type="checkbox" /> <label class="tgl-btn m-0" for="offer"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input formControlName="termsAndConditions" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="termsAndConditions" type="checkbox" /> <label class="tgl-btn m-0" for="termsAndConditions"></label> </div> </li> 在[错误代码]中我采用“formControlName”，所以它对我不起作用。 解决方案： <ul class="list-unstyled noti-list m-0"> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input [formControl]="promotionMaterial" class="tgl tgl-light tgl-primary" id="promotionMaterial" type="checkbox" /> <label class="tgl-btn m-0" for="promotionMaterial"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input [formControl]="offer class="tgl tgl-light tgl-primary" id="offer" type="checkbox" /> <label class="tgl-btn m-0" for="offer"></label> </div> </li> <li class="d-flex align-items-center"> <div class="custom-switch ml-auto"> <input [formControl]="termsAndConditions" class="tgl tgl-light tgl-primary" id="termsAndConditions" type="checkbox" /> <label class="tgl-btn m-0" for="termsAndConditions"></label> </div> </li> 在解决方案中，我将[formControl]插入formControlName，其工作正常 这些错误不是描述性的...... 就我而言 - 结果发现我在子组件中加倍了formControlName='...'。 父组件： <div [formGroup]="formGroup"> <quill-text-editor formControlName="my_control"></quill-text-editor> </div> quill-text-editor 组件模板： <quill-editor formControlName="my_control" <--- I've deleted this to fix the error (onFocus)="onEditorFocus()" (onBlur)="onEditorBlur()" ></quill-editor> <hr> <div class="toolbar"> <div class="tool"> (...) 所以问题是，如果你只有一个表单控件，你还需要一个表单组吗？ 就我而言，我必须通过 registerOnChange 方法使用 #ControlValueAccessor 将输入值传递给父组件。 当我在 formGroup 中设置 formControl 时，一切都是阳光和玫瑰，否则我会遇到同样的错误。 <mat-form-field appearance="fill"> <mat-label > label</mat-label> <input matInput formControlName="planValue"> </mat-form-field> 比较： <form [formGroup]="valueFG" > <mat-form-field appearance="fill"> <mat-label > label</mat-label> <input matInput formControlName="planValue"> </mat-form-field></form> <div class="col-md-12" formArrayName="educations"> </div> ts 文件代码 educations: this.formBuilder.array([]), 或者 <form [formGroup]="manageOrderForm"> </form> ts 文件代码 从 '@angular/router' 导入 { Router }; @Component({ selector: 'app-order', templateUrl: './order.component.html', styleUrls: ['./order.component.css'] }) export class OrderComponent implements OnInit { manageOrderForm: any; } 解决方案 代码 [formGroup]="guestForm" 必须比上面几个级别，例如： <div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm"> <div> <div> <label>First Name* </label> <input formControlName="firstname" type="text" class="form-control input-sm"> </div> </div> </div>

根据 Swagger API 规范生成 Angular2 表单

我正在寻找一种从 Swagger API 定义文件生成一组 Angular2 表单模板的方法。我想要一个允许我测试我的 POST/PUT 请求，甚至在我的应用程序中使用它的结果。 一个...

Angular Material 2：修复多行错误消息

我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： 我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片： 这是代码： <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到，这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗？ 问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute，所以它不占用实际空间。 按照 xumepadismal 在 github 上关于此问题的建议，您可以添加此 scss 作为解决我的问题的解决方法： // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点，并将 .mat-form-field-unterline 重新定位在输入字段之后。 正如材料 15 中在 github 讨论中提到的，可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为，您必须使用以下选项更新 angular.module.ts 提供程序： providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到 使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多，从而在顶部留下不必要的空白空间。 使用 Tailwind CSS，这个解决方案对我来说适用于最新的 Angular 17： .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。

Angular 2 FormGroup 在并非所有 FormControls 都有效时有效

正如我在标题中已经写的那样，是否可以有一个包含多个 FormControl 的表单组，并且当并非所有控件都有效时，该组仍然有效？ 私人 moreInfoForm : FormGroup =

Angular2 Reactive form.reset() 不清除自定义组件

在 Angular2RC5 我的应用程序中，我有一个 SSN 输入，其工作是在用户输入其 SSN（例如 123-34-3434）时添加破折号。我将其用作“反应形式”的一部分（那些不是 tem...