标签: angular-reactive-forms

我正在使用Angular 4 with reactiveforms,momentjs和primeng calendar我正在使用setValue并尝试使用patchValue包含Date的reactiveForm字段.此日期已通过primeng日历创建.

purchaseDate: Sat Sep 02 2017 00:00:00 GMT+0100 (GMT Daylight Time)

我使用这个'日期'做了几件事,然后onSumbit的形式我把日期转换momentjs成一个干净的格式准备后端接受(即YYYY.MM.DD)使用.moment().format(....

但是,当我运行时,.setValue我得到以下控制台错误ERROR Missing number at position 0,无法弄清楚原因.

// convert the date
let newDate = moment(this.form.get('purchaseDate').value).format('YYYY.MM.DD');
// let newDate = moment(this.form.get('purchaseDate')).format('YYYY.MM.DD');
// with or without .value - display the same below (2017.09.01)
console.log(newDate); // 2017.09.01
this.form.get('purchaseDate').setValue(newDate);

// if I create a seperate (empty) reactiveForms field to test against
this.form.get('testField').setValue(newDate) // …

我有一个 Angular 组件，它定义了一个FormGroup，它有一个嵌套FormGroup作为其控件之一。

孩子FormGroup被作为传递@Input参数给一个子组件，并且有一些孩子里面的控件验证FormGroup。

出于某种原因，父组件的valid属性仅在我更新子组件中的值后才会更新，然后对父 FormGroup组件的输入之一进行随机更改FormGroup（例如向输入添加额外的空间）。

设置相当复杂（根据某些条件在子FormGroup上的控件中添加或删除验证器，这可能是验证不会自动发生的原因）。

如何FormGroup在子项中的任何FormGroup更改后立即手动触发父项重新验证？我在子组件中试过这个：

ngOnInit()

  this.myForm.valueChanges.subscribe(val => {
      this.myForm.updateValueAndValidity({onlySelf: false, emitEvent: true})
  });

这应该child在任何输入更改时触发FormGroup的重新验证，并将事件广播到parent组件，这应该触发 parent 的重新验证FormGroup。但是，我遇到了某种堆栈溢出错误，因为这会导致无限循环。

如何触发父FormGroup级自动重新验证？

在angular 4中,我正在创建一个具有类似表单数组的表单

this.formBuilder.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  required:false,
  selectType: ['', [Validators.required]],
  items: this.formBuilder.array([this.buildItems()])
})

...
buildItems() {
  return this.formBuilder.group({ 
     name: ['', [Validators.required]] 
});

这构建表单,我可以从表单和表单中的项目添加删除等.我现在想要实现的是,当selectType等于custom(在表单上设置为单选按钮值)时,我需要更改项目的验证name并清除其验证要求.

我已经完成了另一个表格的设置和更新

  changeValidation() {
      if(condition){
          this.form.get('name').setValidators(Validators.required);
          this.form.get('name').updateValueAndValidity();
      }
  }

哪个工作正常,但我不知道如何更新表单数组上的验证.我试过了

this.items.clearValidators();
this.items.updateValueAndValidity();

我没有得到任何错误,但它也无法正常工作.哪一种是有道理的,因为我不是针对特定的FormControl但是我如何指定一个特定的FormControl时候FormControls是一个数组？

我有这种反应性角形结构

myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;
ngOnInit(): void {
    this.createFormControls();
    this.createForm();
}
createFormControls() {
    this.FIRST_NAME = new FormControl('', [Validators.required]);
    this.LAST_NAME = new FormControl('', [Validators.required]);
}
createForm(): void {
    this.myForm = this.fb.group({
        Personal: this.fb.group({
            FIRST_NAME: this.FIRST_NAME,
            LAST_NAME: this.LAST_NAME,
        })
    })
}

如果我做

this.FIRST_NAME.disable();

它禁用FormControl

如何禁用Personal FormGroup中的所有FormControls

我想提一下,我使用单独的通用组件,以显示错误,所以我不是直接将它们放在html中以避免重复,所以我不能直接在模板中链接和硬编码条件.

我有这个字段和两个验证:

this.username = new FormControl('', [ Validators.minLength(5), Validators.required ]); 

如何为每个验证显示验证错误消息？假设我想在提交字段中显示任何内容时显示两个错误:
"最小长度为5"
"字段是必需的"

然后,如果你把东西放进去,它应该只显示:
"最小长度为5"

这是一个例子,但是,我的现实生活中的例子,比较两个电子邮件字段,如果它们是相同的,因此,如果邮件是不正确的是应该显示:
"电子邮件是不正确的"
"电子邮件是不一样的第一封电子邮件场"

因此,如果电子邮件是正确的并且电子邮件不相同,则只应显示:
"电子邮件与第一个电子邮件字段不同"

我如果没有通过验证的工作,但我不知道如何分开显示,如果一个验证通过,另一个没有,因为我要好好追加的真正原因失败的原因,而不是把两者一些通用的原因.

完整示例:

错误显示组件:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-field-error-display',
  templateUrl: './field.error.display.component.html',
  styleUrls: ['./field.error.display.component.css']
})
export class FieldErrorDisplayComponent
{
    @Input() errorMsg: string;
    @Input() displayError: boolean;
}

组件html:

<div *ngIf="displayError" >
  <small>{{errorMsg}}</small>
</div>

在Register.html中使用erorr显示:

<form [formGroup]="_form" (ngSubmit)="register()">
<h4>Create a new account</h4>
<div class="form-group">
  <label for="email">Email Address</label>
  <input class="form-control" name="email" formControlName="email" />
  <app-field-error-display [displayError]="formValidationService.IsFieldValid(_form,'email')" errorMsg="Please insert correct email"></app-field-error-display> …

Angular FormControl有一个valueChangesObservable指出：

每当控件的值更改时，都会在UI中或以编程方式发出事件。

有没有一种方法可以将FormControl设置为忽略程序化值更改？（基本上等效OneWayToSource于.NET中的绑定）

具体来说，我面临的问题是我的valueChanges订阅，我正在更新一堆绑定到一堆其他控件的值，然后valueChanges也会触发所有这些控件，这在它们执行操作时会出现问题他们的valueChanges处理程序与用户实际触摸的控件冲突。

在某些情况下,我们可能需要将多个表单组件绑定到同一个表单控件.我对处理这种情况的角度方式感到困惑:

更改其中一个组件值时,将更改表单值,但不会更改其他组件值.

我在这种情况下做的解决方法是使用表单值修补from,这很难看:

this.form.patchValue(this.form.value);

这是针对我的问题的stackblitz演示,我为输入更改添加了解决方法而不是选择以便更好地理解.

是否有一种优雅的方式来处理角度反应形式的情况？

我需要将自定义验证器分配给FormGroup。我可以像这样创建FormGroup时执行此操作：

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      }, { validator: this.comparisonValidator })

comparisonValidator(g: FormGroup) {
      if (g.get('myControl1').value > g.get('myControl2'.value)) {
        g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
        return;
      }
}

我遇到一种情况，尽管在实例化FormGroup 之后需要添加自定义验证器，所以我尝试在实例化之后执行此操作myForm，而不是在实例化表单时添加验证器：

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      })

this.myForm.validator = this.comparisonValidator;

这给了我一个编译器错误：

Type '(g: FormGroup) => void' is not assignable to type 'ValidatorFn'.
  Type 'void' is not assignable to type 'ValidationErrors'.

我如何验证程序分配给我FormGroup，以便formGroup作为参数来传递我的comparisonValidator功能？

更新 …

我正在尝试将应用程序迁移到使用ChangeDetectionStrategy.OnPush. 然而，我在尝试使用一些反应形式时遇到了一些阻碍。

我有一个可重用的控件，可以根据某些状态标志（例如*ngIf="control.touched && control.invalid"）显示验证消息。我遇到的问题是，无法检测touched标志何时更改，因此无法使用ChangeDetectorRef.

可以通过侦听事件来引用输入元素本身来完成，click但这并不能说明何时markAsTouched()使用，并且传递对元素的引用并不总是可行的，而且总是不优雅。

有没有一种方法可以使用OnPush并仍然响应表单控件状态（例如touched），或者只是通常很痛苦？

我正在尝试在自定义材料输入文本框中使用 ControlValueAccessor 应用错误验证样式。自从应用这个自定义组件以来，所有带有 formControlName/FormBuilders 的红色边框验证状态都不会显示，例如 required、minlength 等。它在 Angular Material 文本框上原生（开箱即用）工作，直到应用自定义控件。

目标是让自定义文本框与表单验证一起工作。这很自然地显示在 matInput 文本框上。

更新：已 发布答案；但是不确定它是否最有效，试图让 Saloo 的答案也能正常工作（如果有人可以发布 stackbliz，那就太好了），对任何更有效的选择开放

打字稿：

import { Component, OnInit, Input, ViewChild, EventEmitter, Output, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-input-textbox',
  templateUrl: './input-textbox.component.html',
  styleUrls: ['./input-textbox.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputTextboxComponent),
      multi: true
    }
  ]
})

export class InputTextboxComponent implements OnInit, ControlValueAccessor {
  @Input() MaxLength: string;
  @Input() Value: string;
  @Input() type: string;
  @Input() Label: string;
  @Input() PlaceHolder: …