Как проверить длину FormArray в angular2

Question

У меня есть данные инициативой форма в angular2, как показано ниже

this.formBuilder.group({ 
    'name': ['',Validators.required], 
    'description': ['', Validators.required], 
    'places': this.formBuilder.array([], Validators.minlength(1)) 
}) 

Я хочу добавить валидации к place formArray, поэтому я добавляю minlength проверки, но проверка MinLength не работает на formArray.

Каковы другие проверки для formArray, так что форма должна быть действительной только тогда, когда массив объектов содержит по крайней мере одно место.

Answer 1

если вы пытаетесь добавить проверку, чтобы formarray попробовать это может помочь вам,

this.formBuilder.group({ 
    'name': ['',Validators.required], 
    'description': ['', Validators.required], 
    'places': this.formBuilder.array(this.initPlaces()) 
}) 

initPlaces() {  
     return this._fb.group({ 
      places: ['',[Validators.minLength(1)]]   
     }); 
    } 

этого initPlaces просто вернет formGroup с проверкой в ​​соответствии с требованием.

Answer 2

потому, что вы используете неправильное имя функции валидатор: minlength ->minLength

демо-код:

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <form novalidate [formGroup]="tpForm" (ngSubmit)="onSubmit()"> 
     <div><input type="text" formControlName="name"></div> 
     <div><textarea formControlName="description"></textarea></div> 
     <div formArrayName="places"> 
     <button type="button" (click)="addPlace()">+</button> 
     <div *ngFor="let place of places.controls; let i = index"> 
      <div> 
       <span>Places {{i + 1}}</span> 
       <button type="button" *ngIf="places.controls.length > 0" 
        (click)="removePlace(i)"> 
        x 
       </button> 
      </div> 
      <input type="text" [formControlName]="i"> 
     </div> 
     </div> 
     <button type="submit">Submit</button> 
    </form> 

    <p>Status: {{ tpForm.valid }}</p> 
    `, 
    styles: [ 
    ` 


    ` 
    ] 
}) 
export class AppComponent implements OnInit { 
    tpForm: FormGroup; 

    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 
    this.tpForm = this.fb.group({ 
     'name': ['',Validators.required], 
     'description': ['', Validators.required], 
     'places': this.fb.array([ 
     this.fb.control('') 
     ], Validators.minLength(1)) 
    }) 
    } 

    get places(): FormArray { 
    return this.tpForm.get('places') as FormArray; 
    } 

    onSubmit() { 

    } 

    addPlace() { 
    this.places.push(this.fb.control('')); 
    } 

    removePlace(index) { 
    this.places.removeAt(index); 
    } 

} 

Plunker: https://plnkr.co/edit/cfi7nN?p=preview

Answer 3

Добавить пользовательский валидатор к службе проверки:

minLengthArray(min: number) { 
    return (c: AbstractControl): {[key: string]: any} => { 
     if (c.value.length >= min) 
      return null; 

     return { 'minLengthArray': {valid: false }}; 
    } 
} 

An d, то при создании формы выполните следующие действия:

this.formBuilder.group({ 
    'name': ['',Validators.required], 
    'description': ['', Validators.required], 
    'places': this.formBuilder.array([], this.validationService.minLengthArray(1)) 
}); 

И вы можете проверить ошибки против FormArray путем проверки FormArray.hasError('minLengthArray')

Answer 4

Validators.required сделать магию для вас

this.formGroup = this.formBuilder.group({ 
     taskTreeId: [Common.UID()], 
     executionProgrammedTime: ["", [Validators.required]], 
     description: [""], 
     tasks: this.formBuilder.array([], Validators.required) 
}); 

<button type="button" class="btn btn-success btn-rounded" [disabled]="!formGroup.valid">SAVE</button>