标签: angular-reactive-forms

需要知道，当您在一个表单中有多个控件并且您想知道用户更改为哪个控件以便您可以执行某些操作时。

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

为什么我需要获取 formControlName？

正如您在图像中看到的，某些字段已编辑但未确认，这就是为什么用户会看到用于验证或取消对该特定字段的操作的选项的原因。这就是为什么我需要获取formControlName输入更改的字段，以便我可以只显示该字段的选项。

我已经搜索了它的解决方案，但找不到stack-overflow这就是为什么我决定发布这个问题的答案

我试图用密码值确认密码.我按照Async验证器标准完成了.但我想知道它没有工作,并给我以下错误.请告诉任何人如何解决此错误.

返回Promise或Observable的预期验证器.

这是我的代码.

呼叫验证器:

cPass: ['', Validators.compose([
  Validators.required, 
  Validators.maxLength(32),
  Validators.minLength(10)
]),
  this.validPassword.bind(this)
]

自定义验证功能:

validPassword(control: AbstractControl) {            
  const isEqual = Observable.of(this.password == control.value);
  return isEqual ? { valid : true } : null;         
}

嗨我正在使用表单生成器在角度2中实现一个表单

在component.ts中,我使用formGroup实现了我的表单

以下是我的代码

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      zip: ['', [<any>Validators.required , …

这个问题非常明显.我想拦截FormControl的value属性的传入值,并能够截取它连接到的HTML控件的传出值.

假设我有一个名为"firstName"的FormControl,我把它连接到一个文本框,如下所示:

<input type="text" formControlName="firstName" />

默认情况下,当用户在文本框中输入值并提交时,FormControl的值将设置为文本框中的值.有没有什么方法可以拦截设置的值并在设置之前修改它？

同样,有没有办法拦截FormControl发送到HTML控件的值？例如,如果我将FormControl的值设置为某些内容,但我想修改文本框中显示的值.

我知道我可以使用ngModel充当表单和控件之间的中介,但是当使用多个控件时,这会变得很麻烦.我也知道你可以创建自己的控件并实现ControlValueAccessor,但这也很麻烦,因为我必须为我想要使用的每个控件创建一个相应的控件.

有关我提出此问题的原因的详细信息,请参阅https://github.com/ionic-team/ionic/issues/7121

我正在使用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) // …

我有一个自定义的模型驱动表单验证器来验证最大文本长度

export function maxTextLength(length: string) {
  return function (control: FormControl) {
    const maxLenghtAllowed: number = +length;
    let value: string = control.value;
    if (value !== '' && value != null) {
      value = value.trim();
    }

    if (value != null && value.length > maxLenghtAllowed) {
      return { maxTextLength: true };
    }else {
      return null;
    }
  }
}

如何编写单元测试用例形成这个？

我有一个 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级自动重新验证？

我正在尝试使用填充了数据对象的嵌套组件创建复杂的反应形式.

我试图实现的行为非常类似于模板驱动形式的双向数据绑定:当用户编辑表单的输入时,数据对象会自动更改.

但是与模板驱动的形式相反,我无法使用,[(ngModel)]因为它在角度V6的反应形式中被弃用.

我知道fromGroup.patchValue()只会进行单向绑定,然后不得不手动订阅更改事件并手动更新数据对象 - 这将导致大量疲惫的代码.

这种情况有没有解决方法？

我有一个与Angular Reactive Form有关的问题,我无法解决这个问题.

码

form.html和form.ts

import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
import {ProcessService} from "../../../service/process.service";


@Component({
  selector: 'app-check-order-form',
  templateUrl: './check-order-form.component.html',
  styleUrls: ['./check-order-form.component.css']
})
export class CheckOrderFormComponent implements OnInit {
  submitted = false;

  X: FormGroup = this._fb.group({
    field: '',
    Y: this._fb.array([])
  });

  Yg: FormGroup = this._fb.group({
    subfield: '',
    Z: this._fb.array([])
  });

  Zg: FormGroup = this._fb.group({
    subsubfield: ''
  });

  constructor(private _fb: FormBuilder) {
  }

  ngOnInit() {
    this.createYg();
    this.createZg();
  }

  ngOnChanges() {
  }

  onSubmit(formValue) {
    this.submitted …

对于我正在构建的应用程序，我从 API 检索数据并直接使用该响应设置我的表单值。为此，我正在使用反应式表单模块。我已经构建了表单，使其与我从 API 获取的对象相匹配。问题是某些字段应该是一个对象 (FormGroup)，但在为空时为 NULL。这会导致错误“无法将 undefined 或 null 转换为对象”。

表单组实例：

note: this.formBuilder.group({
   turnbook_file: [''],
   note: [''],
   additional_files: ['']
});

来自 API 的响应

note: NULL

我的想法是，也许可以在定义 FormGroup 的地方放置 OR 语句或其他内容，如下所示：

note: this.formBuilder.group({
   turnbook_file: [''],
   note: [''],
   additional_files: ['']
} | NULL);