2017-02-28 26 views
1

当我尝试设置多选值,它给了我像多选择不工作,并给出错误“this.validator不是一个函数” - Angular2

this.validator错误是不是一个函数

在Angular2 FormBuilder中。

这是我的代码:

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, Validators } from '@angular/forms'; 
import { Http, Headers } from '@angular/http'; 
import { Router,ActivatedRoute } from '@angular/router'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-user', 
    templateUrl: './user.component.html', 
    styleUrls: ['./user.component.css'] 
}) 
export class UserComponent implements OnInit { 

userID: number; 
public headers; 
public user; 

constructor(public fb: FormBuilder, public _router: Router, public http: Http, private route: ActivatedRoute) { 
    this.user = this.fb.group({ 
     name: ["", Validators.required], 
     age: ["", Validators.required], 
     gender: ["", Validators.required], 
     role: ["", Validators.required], 
     theme: ["", Validators.required], 
     isActive: ["", Validators.required], 
     topics: ["", Validators.required], 
     toggle: ["", Validators.required], 
     address: ["", Validators.required], 
    }); 
} 

doLogin(event) { 
    console.log(event); 
} 

public genders = [ 
    { value: 'F', display: 'Female' }, 
    { value: 'M', display: 'Male' } 
]; 

public roles = [ 
    { value: 'admin', display: 'Administrator' }, 
    { value: 'guest', display: 'Guest' }, 
    { value: 'custom', display: 'Custom' } 
] 
public themes = [ 
    { backgroundColor: 'black', fontColor: 'white', display: 'Dark' }, 
    { backgroundColor: 'white', fontColor: 'black', display: 'Light' }, 
    { backgroundColor: 'grey', fontColor: 'white', display: 'Sleek' } 
]; 

public topics = [ 
    { value: 'game', display: 'Gaming' }, 
    { value: 'tech', display: 'Technology' }, 
    { value: 'life', display: 'Lifestyle' }, 
]; 

public toggles = [ 
    { value: 'toggled', display: 'Toggled' }, 
    { value: 'untoggled', display: 'UnToggled' }, 
]; 

public t = { 
    true: { value: 'toggled', display: 'Toggled' }, 
    false: { value: 'untoggled', display: 'UnToggled' } 
} 




ngOnInit() { 

    this.user = this.fb.group({ 
     "id":"8", 
     "name":"df", 
     "gender":"M", 
     "role":"guest", 
     "theme":{ 
      backgroundColor: 'black', 
      fontColor: 'white', 
      display: 'Dark' 
     }, 
     "isActive":"0", 
     "toggle":"toggled", 
     "topics":[ "tech", "life" ], 
     "age":'500', 
     "address":"sdf" 
    }); 

} 
} 

最后,我需要设置格式的值在主题字段的数组。当我没有经历过的形式设置静态值和选择选项,并打印此表值,那么它的(主题领域)已打印的阵列格式值:

enter image description here

+0

格式化为清楚起见 – Soraz

回答

1

在构造函数替换

topics: ["", Validators.required], 

topics: [[""], Validators.required], 

和ngOnInit方法变更

工作

this.user = this.fb.group 

this.user.setValue 

我都面临着同样的问题,以下更改仅供参考,如果您需要设置一个值,那么你需要使用this.user.patchValue({fieldName:'fieldValue'})

相关问题