angular2-forms 相关问题

Angular表单是数据输入控件的集合。将此标记用于与模板驱动和反应形式有关的问题，包括NgForm，FormGroup，FormControl，AbstractControl，FormBuilder和Validator，以及表单和组件之间的数据绑定。

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

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

angular angular2-forms

回答 9 投票 0

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

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

form-submit angular2-forms setfocus

回答 4 投票 0

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

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

angular angular-material angular-reactive-forms angular2-forms

回答 1 投票 0

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

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

angular angular-material angular2-forms

回答 1 投票 0

错误：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>

angular angular2-forms

回答 7 投票 0

根据 Swagger API 规范生成 Angular2 表单

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

json swagger angular2-forms jsonschema

回答 2 投票 0

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 angular2-forms angular-material2

回答 4 投票 0

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

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

angular angular2-forms

回答 1 投票 0

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

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

angular angular2-forms

回答 1 投票 0

在动态 Web 项目中包含角度站点的最佳实践

我正在使用 Eclipse 构建 Angular 应用程序（我的第一个应用程序），一开始我通过 New->Angular Project 创建我的项目（我安装了插件），但后来我被要求使用 Dy...

angular angular2-forms

回答 1 投票 0

Angular - 没有将“exportAs”设置为“ngModel”的指令

以下是AngularJS项目中的文件。根据一些帖子的建议，我添加了： ngModel 名称 =“当前密码”#currentPassword =“ngModel” 在输入字段中，但仍然...

angular angular2-forms angular2-ngmodel

回答 7 投票 0

FormControl 在 Angular 2 中返回空值

我正在使用表格我正在使用表格 <form [formGroup]="form"> <input type="text" value={{userDetails.first_name}} formControlName = "firstName"> <button type="submit" data-action="save" (click)="onSubmit(form.value)"> </form> 这里 userDetails.first_name 值是 Tom。它在 UI 上的文本框内可见；但是当我提交表单时，form.firstName给了我空值。要获取该值，您应该检查 form.value.firstName 而不是 form.firstName。要更好地了解表单的结构，请在表单提交上执行 console.log(this.form)。声明表单组： private userForm: FormGroup; 像这样初始化用户表单： userForm = form.group({ firstName: [firstName, [Validators.required]] }); 像这样在 HTML 中声明您的表单： <form class="example-form " [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)"> <input type="text" value={{userDetails.firstName}} formControlName = "firstName"> <button type="submit" data-action="save"/> </form> 像这样创建你的 onSubmit() 方法： onSubmit({formValue, valid}: { formValue: UserDetails, valid: boolean }) { const firstName= value.firstName; } html <form [formGroup]="form"> <input type="text" formControlName="firstName"> <button type="submit" data-action="save" (click)="onSubmit(form.value)"> </form> 组件你可以这样设置值 this.form.patchValue({firstName:this.userDetails.first_name}); 确保将表单 Group 的实例创建到组件中

angular angular2-forms angular2-services

回答 3 投票 0

在 angular2 中向 FormGroup 添加多个验证器

如何向 FormGroup 添加多个验证器。 FormControl 可以接受验证器数组，但 FormGroup 不能。除了创建单个自定义验证器之外，还有其他解决方法吗？ ...

angular angular2-forms angular2-formbuilder

回答 3 投票 0

添加/删除反应式表单验证器以动态创建的输入

我在 Angular 4 中创建了一个表单，它允许用户单击表单中的 ADD 或 REMOVE 按钮来向表单添加/删除字段。我使用 ngFor 从 arr 在屏幕上创建 html 输入...

angular angular2-forms

回答 4 投票 0

动态更改按钮图标

给出以下按钮，我想动态地...