如何驗證FormArray長度angular2

我在angular2像下面如何驗證FormArray長度angular2

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

我想驗證添加到place formArray一個數據驅動的形式，所以我加入minlength驗證，但使用MINLENGTH驗證不工作在formArray上。

formArray的其他驗證是什麼，所以只有當places數組包含至少一個地方時，表單才必須有效。

來源

2017-02-12 Chandra Shekhar

刮即應工作https://github.com/angular/angular/commit/7383e4a8012962430e8925b57554089cf92173cc –

你可能也有興趣在這個https://github.com/angular/angular/commit/17c5fa9293bbfc30625c139caccad15ee883a0e3無論如何這應該工作確保你有一個最新版本 –

如果你想添加驗證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按要求。

來源

2017-02-12 06:57:21

，因爲您使用錯誤校驗功能名稱：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

來源

2017-02-12 07:59:45

這個自定義驗證添加到您的驗證服務：

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.hasError('minLengthArray')

來源

2017-06-15 18:51:22 user1779362

嘿，它實際上工作:)） - 但我怎麼讓它「冒泡」形式 - 防止提交（它不適合我）？ – T4NK3R

你使用引導？這裏是一個例子：

Must upload file to create order

我在我的ts中有這個：this.form = this._fb.group（{this._fb.array（[]，this._vs.minLengthArray（1）） } ）; – user1779362

好的，但我希望有一種方法可以使這個自定義驗證器自動地「影響」形式（in）有效性，所以我不必顯式檢查formArrays的有效性 - 就像使用內置函數一樣，在驗證器中。現在看來，它確實是這樣 - 不知道爲什麼它不是昨天：D – T4NK3R

Validators.required檢查對FormArray錯誤做魔力爲你

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>

來源

2017-11-09 21:01:31

如何驗證FormArray長度angular2

回答

相關問題