Angular 4 数组验证 [英] Angular 4 array validation

问题描述

我需要关于响应式表单中formArray验证的帮助.我想验证数组中的每个项目，但我不知道该怎么做.谢谢.

html 代码:

 name:<input formControlName="name" id="name" type="text"><div *ngIf="name.invalid && (name.dirty || name.touched)"><div *ngIf="name.errors.required">必需的

TypeScript 代码:

 createForm() {this.form = this.fb.group({人:this.fb.array([this.initItemRows()])});}initItemRows() {返回 this.fb.group({姓名: ['']，信息:['']});}添加新行(){const control = <FormArray>this.form.controls['person'];control.push(this.initItemRows());}deleteRow(索引:数字){const control = <FormArray>this.form.controls['person'];control.removeAt(index);}get name() { return this.form.get('person.name');}get info() { return this.form.get('person.info');}

我试过了:

initItemRows() {返回 this.fb.group({名称: ['', Validators.required ],信息: ['', Validators.required ]});}

它不起作用..

解决方案

name 和 info 的 getter 实际上并不针对特定的表单控件，因为您的 person 是一个 formArray，例如 this.form.get('person.name'); 在您的表单中不存在.您需要做的是，对每个表单组使用迭代并使用其控件定位该组，因此您的模板应如下所示:

<div *ngFor="let p of form.controls.person.controls; let i = index"[formGroupName]="i"><label for="name">name:</label><input formControlName="name" id="name" type="text"><!--检查这个组中的名字是否有错误--><div *ngIf="p.controls.name.dirty"><div *ngIf="p.hasError('required', 'name')">必需</div>

演示

<小时>

另外一个建议是，您可以稍微缩短代码并删除初始化/向数组添加表单组并不真正需要的方法，所以在这里我删除了addNewRow，initItemRows 当你想添加新行时可以调用.

this.form = this.fb.group({人:this.fb.array([])});this.initItemRows();initItemRows() {让 ctrl = <FormArray>this.form.controls.person;ctrl.push(this.fb.group({名称:['', Validators.required],信息:[''，Validators.required]}))}

I need help with formArray validation in reactive form. I want validate each item in array, but i have no idea how can i do that. Thanks.

html code:

    <label for="name">name:</label>
    <input formControlName="name" id="name" type="text">
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
       <div *ngIf="name.errors.required">
         required
       </div>
    </div>

TypeScript code:

 createForm() {
    this.form = this.fb.group({
      person: this.fb.array([this.initItemRows()])
    });
  }

initItemRows() {
    return this.fb.group({
      name: [''],
      info: ['']
    });
  }

  addNewRow() {
    const control = <FormArray>this.form.controls['person'];
    control.push(this.initItemRows());
  }

  deleteRow(index: number) {
    const control = <FormArray>this.form.controls['person'];
    control.removeAt(index);
  }

  get name() { return this.form.get('person.name'); }
  get info() { return this.form.get('person.info'); }

I tried this:

initItemRows() {
    return this.fb.group({
      name: ['', Validators.required ],
      info: ['', Validators.required ]
    });
  }

It doesnt work..

解决方案

Your getters for name and info actually don't target the specific form controls, since your person is a formArray, for example this.form.get('person.name'); does not exist in your form. What you need to do, is use the iteration for each formgroup and target that group with its controls, so your template should look like this:

<div *ngFor="let p of form.controls.person.controls; let i = index" 
             [formGroupName]="i">
  <label for="name">name:</label>
  <input formControlName="name" id="name" type="text">
  <!-- check if the name in this group has the error -->
  <div *ngIf="p.controls.name.dirty">
    <div *ngIf="p.hasError('required', 'name')">Required</div>  
  </div>
</div>

DEMO

---

Furthermore a suggestion is, that you can shorten your code a bit and remove a method that isn't really needed for initializing/adding formgroup to your array, so here I removed the addNewRow, initItemRows can be called when you want a new row added.

this.form = this.fb.group({
  person: this.fb.array([])
});
this.initItemRows();

initItemRows() {
  let ctrl = <FormArray>this.form.controls.person;
  ctrl.push(this.fb.group({
    name: ['', Validators.required],
    info: ['', Validators.required]      
  }))
}

这篇关于Angular 4 数组验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！