Question

我正在使用ControlGroup构建表单，并且我在其中加载了一个类对象。但是我有一半的时间遇到标题中提到的错误。有些表格会加载而有些表格不适合。

我有一个像这样的类文件：

export class User {
    id: number;
    email: string;
    sign_in_count: number;
    created_at: string;
    first_name: string;
    last_name: string;
    birth_date: Date;
    news_letter: boolean;
    fb_id: string;
    gender: boolean;
    phone: string;
    picture: any;
}

在我的UserDetailComponent中，我在控件中加载类，如下所示：

export class UserDetailComponent implements OnInit {
    user: User;
    userDetailForm: ControlGroup;

    constructor(
        private form: FormBuilder,
        private _userService: UserService,
        private _router: Router,
        private params: RouteSegment
    ) { }
    ngOnInit() {
        this.user = this._userService.getUser();
        if (this.user === undefined) {
            this._userService.getSingleUser(this.params.getParam('id'))
                .subscribe(data => (this.user = data, this.setForm()));
        } else {
            this.setForm();
        }
    }

    setForm() {
        this.userDetailForm = this.form.group(this.user);
    }
}

在最后一行，我得到堆栈跟踪的错误：

browser_adapter.ts:78 TypeError: this.validator is not a function
    at Control.AbstractControl._runValidator (model.ts:146)
    at Control.AbstractControl.updateValueAndValidity (model.ts:128)
    at new Control (model.ts:282)
    at FormBuilder.control (form_builder.ts:32)
    at FormBuilder._createControl (form_builder.ts:66)
    at eval (form_builder.ts:50)
    at Function.StringMapWrapper.forEach (collection.ts:132)
    at FormBuilder._reduceControls (form_builder.ts:49)
    at FormBuilder.group (form_builder.ts:19)
    at UserDetailComponent.setForm (user-detail.component.ts:95)

Answer 1

当我在表单构建器中以错误的方式绑定值数组时，我遇到了此错误。

我做了什么：

fb.group({items: [1, 2, 3, 4]})

应该如何：

fb.group({items: [[1, 2, 3, 4]]})

您必须将所有内容都包装到数组中，否则angular会认为[1, 2, 3, 4]是表单控件定义而不是表单控件值。

Answer 2

在构造函数中创建表单。当Angular在其首次尝试解析绑定时没有找到表单时，它就无法正常工作。

this.userDetailForm只需要使用空组或一些静态控件进行初始化。然后，当数据从服务器到达时，通过添加/删除控件和更新值来更新组。

Answer 3

当我从实现Validator的组件中复制/粘贴时发生了这种情况，但是未能删除新组件上的NG_VALIDATORS提供程序。

Angular 2 Typescript：TypeError：this.validator不是函数

3 个答案: