标签: angular-reactive-forms

我在 Angular2 中有一个反应式表单设置。在组件中，我订阅表单控件的值更改，防抖时间为 500 毫秒，如下所示：

myForm.get("myField").valueChanges.debounceTime(500).subscribe(...);

如果值是由代码而不是用户更改的，是否有办法跳过去抖时间？或者有没有办法将这两个事件分开？

我在 Angular 5 中有一个反应式形式，它正在工作。该表单有 eq 一个输入字段和一个复选框。

<div class="form-group" *ngIf="!myForm.controls.myCheckbox.value">
    <input class="form-control" formControlName="myField"
</div>

<div class="form-group">
    <input type="checkbox" formControlName="myCheckbox">
</div>

复选框用于处理输入字段的可见性：如果选中的输入字段是不可见的，反之亦然。

我正在使用 TestBed 使用 jasmine 编写测试来配置 componentFixture。

我尝试获取 formControl 并检查是否存在，例如使用以下语句，但它不起作用。

let myField= component.driverForm.controls['myField'];
let myCheckbox= component.driverForm.controls['myCheckbox'];
myCheckbox.setValue(true);

fixture.detectChanges();

expect(myField).toBeFalsy("myField not existing");

预期 FormControl( ... ) 为假“myField 不存在”。

我现在的问题是，当单击茉莉花测试中的复选框时，如何测试表单控件“myField”是否可见/不可见？

我有一个使用自定义组件作为输入的表单，它接收 ControlName。当我在组件中键入内容时，它不会更新“错误”属性。

应用程序-pf-input-text.ts：

import { Component, OnInit, Input } from \'@angular/core\';\n\n@Component({\n  selector: \'app-pf-input-text\',\n  templateUrl: \'./pf-input-text.component.html\',\n  styleUrls: [\'./pf-input-text.component.scss\']\n})\nexport class PfInputTextComponent implements OnInit {\n\n  @Input() id: string;\n  @Input() name: string;\n  @Input() value: string;\n  @Input() placeholder: string;\n\n  //falta trim\n\n  @Input() maxlength: string;\n  @Input() minlength: string;\n\n  @Input() disabled: boolean;\n  @Input() required: boolean;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n}\n

app-pf-input-text.html：

<div class="input-group">\n  <input \n      type="text" class="form-control">\n</div>\n

我的表格：

import { Component, OnInit, Input } from \'@angular/core\';\n\nimport { FormArray, FormBuilder, FormGroup, …

我知道我们可以使用 FormArray 添加对象数组，FormGroup如下所示： https:
//alligator.io/angular/reactive-forms-formarray-dynamic-fields/

ngOnInit() {
  this.orderForm = this.formBuilder.group({
    customerName: '',
    email: '',
    items: this.formBuilder.array([ this.createItem() ])
  });
}

createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    description: '',
    price: ''
  });
}

addItem(): void {
  this.items = this.orderForm.get('items') as FormArray;
  this.items.push(this.createItem());
}

<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
</div>

但我想要的是数字数组而不是对象。
我们如何在 Angular 6.* …

我正在使用 Angular 反应形式和 Angular 材料。我的代码运行良好。但我想一次显示一个错误

我的 .html 文件代码

      <form [formGroup]="accountDetailsForm" novalidate (ngSubmit)="onSubmitAccountDetails(accountDetailsForm.value)">

        <mat-form-field class="full-width">
          <input matInput maxlength="25" placeholder="Username" formControlName="username" required>
          <mat-error *ngFor="let validation of account_validation_messages.username">
            <mat-error class="error-message" *ngIf="accountDetailsForm.get('username').hasError(validation.type) && (accountDetailsForm.get('username').dirty || accountDetailsForm.get('username').touched)">{{validation.message}}</mat-error>
          </mat-error>
        </mat-form-field>

        <mat-form-field class="full-width">
          <input matInput type="email" placeholder="Email" formControlName="email" required>
          <mat-error *ngFor="let validation of account_validation_messages.email">
            <mat-error class="error-message" *ngIf="accountDetailsForm.get('email').hasError(validation.type) && (accountDetailsForm.get('email').dirty || accountDetailsForm.get('email').touched)">{{validation.message}}</mat-error>
          </mat-error>
        </mat-form-field>


        <div formGroupName="matching_passwords">
          <mat-form-field class="full-width">
            <input matInput type="password" placeholder="Password" formControlName="password" required>
            <mat-error *ngFor="let validation of account_validation_messages.password">
              <mat-error class="error-message" *ngIf="accountDetailsForm.get('matching_passwords').get('password').hasError(validation.type) && (accountDetailsForm.get('matching_passwords').get('password').dirty || accountDetailsForm.get('matching_passwords').get('password').touched)">{{validation.message}}</mat-error>
            </mat-error>
          </mat-form-field> …

当我的 html 在 Angular 2 中渲染时，如果所有表单控件出错，如何将它们设置为错误状态？为了澄清这一点，示例代码中只有一个下拉菜单。当表单加载时，它是非红色/没有必需的消息。如果我打开下拉菜单，然后单击外部某处而不进行任何选择，那么红色魔法就会发生，我会看到错误消息。当表单第一次呈现时，我需要它处于错误状态/红色并带有错误消息。我想我需要在某个地方设置该控件的错误状态。只是不知道在哪里以及如何。请指教。代码如下 https://stackblitz.com/edit/angular-error-initial

我需要获取反应式表单输入email并将password它们传递给我的函数，该函数调用注册服务方法以使用电子邮件在 firebase 中注册新用户。不幸的是，在表单提交后，在 Chrome 控制台中我得到RegisterComponent.html:2 ERROR ReferenceError: email is not defined

我的代码现在看起来像这样：

注册.组件.ts

export class RegisterComponent {
  form: FormGroup;

  constructor(fb: FormBuilder, private authService: AuthService) {
    this.form = fb.group({
  email:['',Validators.required ],
  password:['',Validators.compose([Validators.required,
    PasswordValidator.cannotContainSpace])]
    })
    email = this.form.controls['email'].value;
    password = this.form.controls['password'].value;
   }


   signInWithEmail() {
     this.authService.regUser(this.email, this.password);
   }
}

我的 AuthService 文件：

 regUser() {
    firebase.auth().createUserWithEmailAndPassword(email, pass)
 .catch(function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
   // ...
 });
console.log(this.form.controls['email'].value);
    }

这只是与问题相关的我的代码的一部分。我没有包括注册表，因为它又大又乱，所以我认为您不需要看到它。提前致谢。

编辑：

注册.component.html …

我有一个结构有些复杂的反应形式。我正在努力为表单中的表单组对象数组创建表单控件和验证。

类似的问题之前曾在这里被问过，但我无法找到有关如何绑定到表单组数组的任何答案。

父表单组Record具有顶级属性，然后是表单组对象的嵌套数组Items。

每个项目都有属性“标题”和“描述”。标题和描述需要控制和验证。我不一定知道表单上需要多少个项目，这取决于使用默认值初始化表单时每个“记录”有多少个“项目”。

这是一个 stackblitz：https://stackblitz.com/edit/angular-nkhgsj

以下是代码中的一些片段：

示例数据：

  // Placeholder to emulate data from an API response
  recordAPIResponse =
    {
      "ID": 12345,
      "Items": [
        {
          "Title": "Example title 1",
          "Description": "Example description 1"
        },
        {
          "Title": "Example title 2",
          "Description": "Example description 2"
        },
        {
          "Title": "Example title 3",
          "Description": "Example description 3"
        }
      ]
    };

该表单使用从 API 响应返回的记录值进行初始化。

  private initRecordForm(record: Record) {

    // Create items controls with validations
    const itemsCtrls = this.createItemsCtrls(record.Items);

    const recordForm …

我正在制作一个反应式表单，其中填充了数据库中的默认值。因此用户可以随意修改一些数据然后发回表单。但如果他选择不更改某些字段，我希望能够在发送表单时获得默认值。但是当我尝试显示此类字段的值时，出现未定义的错误。

我尝试在创建时将默认值直接放入 formControl 中，在模板中的 [value] 属性中显示该值。

我无法准确地向您展示我正在做什么，因为这又是我公司的政策，但这是一个伪代码

 form_control: new FormControl({ value: myValue, disabled: false }, [Validators.required]);

在模板中：

<input matInput placeholder="myPlaceHolder" formControlName="form_control" id="form">

我希望在我的输入中看到我的默认值，并且即使我没有触及该字段也能够获得该值。输入中没有显示任何内容，并且当我尝试在控制台中显示输入的值时收到未定义的消息。

感谢你们对我的帮助！

我有与这里类似的问题：

如何解决使用自定义验证器语法时遇到的错误？

不推荐使用 FormBuilder 组

我已经阅读了问题，但问题仍然出现在 linter 中：

不推荐使用组：此 API 不是类型安全的，可能会导致 Closure Compiler 重命名问题。使用FormBuilder#group重载 withAbstractControlOptions代替。请注意， AbstractControlOptions期望validators和asyncValidators将成为有效的验证器。如果您有自定义验证器，请确保它们的验证函数参数是AbstractControl而不是子类，例如FormGroup. 这些函数将使用类型的对象调用，AbstractControl并且不能自动向下转换为子类，因此 TypeScript 将此视为错误。例如，将(group: FormGroup) => ValidationErrors|null 签名更改为(group: AbstractControl) => ValidationErrors|null。（弃用）

这是我的 formBuilder：

registerForm = this._fb.group({
        firstname: ["", [Validators.required]],
        lastname: ["", [Validators.required]],
        email: ["", [Validators.required, Validators.email]],
        password: ["", [PasswordValidator.strength]],
        confirmPassword: ["", [Validators.required]]
    }, {
        validator: PasswordValidator.confirmed("password", "confirmPassword")
    });

还有我的验证器：

export class PasswordValidator {
    static confirmed = (controlName: …