2017-07-08 48 views
0

我想設置值數組這樣的數組形式值:如何設置與角

this.form.controls[name].setValue('name') 

,但我與陣列的形式工作,而這是行不通的,即使我通過指數especific陣列形式

例如這是我的形式陣列和我想要做的是在一個功能

user: FormGroup; 
    users: FormGroup; 

    constructor(private fb: FormBuilder) {} 
    ngOnInit() { 
    this.user = this.buildGroup(); 
    this.users = this.fb.group({ 
     data: this.fb.array([this.user]) 
    }); 
    } 
    get fData() { 
    return this.users.get('data') as FormArray; 
    } 
    buildGroup() { 
    return this.fb.group({ 
     name: ['', [Validators.required, Validators.minLength(2)]], 
     account: this.fb.group({ 
     email: ['', Validators.required], 
     confirm: ['', Validators.required] 
     }) 
    }); 
    } 
setValue(index) { 
    this.fData[index].controls[name].setValue('name') 
    } 
    onSubmit() { 
    this.fData.push(this.buildGroup()); 
    const {valid, value} = this.fData; 
    console.log(valid, value); 
    } 

但this.fData [指數] .controls [名稱] .setValue('名稱設定值')這不起作用

+0

廢棄我以前的答案。問題很可能是你[不向setValue傳遞一個數組](https://angular.io/api/forms/FormArray#example-1)。 – Tom

+0

不應該將索引傳遞給具體的數組表單嗎?我tryng這個,但這是不工作setValue(索引){ this.fData.setValue(['Name']); }錯誤說明必須爲名稱'name'提供一個fom控件的值 – LLaza

+0

試試這個:this.fData [index] .controls ['name']。setValue(['name'])' – Tom

回答

3

對於陣列,您需要使用setControl。這樣的事情:

this.productForm = this.fb.group({ 
     productName: ['', [Validators.required, 
          Validators.minLength(3), 
          Validators.maxLength(50)]], 
     productCode: ['', Validators.required], 
     starRating: ['', NumberValidators.range(1, 5)], 
     tags: this.fb.array([]), 
     description: '' 
    }); 

    ... 

    // Update the data on the form 
    this.productForm.patchValue({ 
     productName: this.product.productName, 
     productCode: this.product.productCode, 
     starRating: this.product.starRating, 
     description: this.product.description 
    }); 
    this.productForm.setControl('tags', this.fb.array(this.product.tags || [])); 
+0

我一定錯過了您的pluralsight課程;-) – Tom

+1

找到它:https://app.pluralsight.com/player?course=angular-2-reactive-forms&author=deborah-kurata&name = angular-2-reactive-forms-m8&clip = 5&mode = live&start = 348.941 – Tom

+0

「Angular:Reactive Forms」課程?希望它有幫助! – DeborahK

0

這是我在formArray的特定窗體控件中手動設置了值,併爲我工作。我有formArray,命名爲bundleDetails

this.formBuilderObj['bundleDetails'] = 
    this.formBuilder.array([this.createBundleItem()]); 

    createBundleItem(): FormGroup { 
    return this.formBuilder.group({ 
    bsku: ['', Validators.required], 
    bqty: ['', Validators.required], 
    bprice: ['', Validators.required] 
    }); 
    } 

方法設置bsku控件的值(其中指數爲[formGroupName]="i"從HTML文件傳遞)。

setSku(sku: string, index: number) { 
    const faControl = 
    (<FormArray>this.pmForm.controls['bundleDetails']).at(index); 
    faControl['controls'].bsku.setValue(sku); 
    } 

希望這會有所幫助。快樂的編碼。