Question

我有一个使用表单生成器（Angular2 Beta 1，TypoScript）创建的表单，即：constructor中有类似的内容：

this.form = this._formBuilder.group({
    'username': ['', Validators.required],
    'email': ['', Validators.required]
});

表单显示，到目前为止一切都很好。当我从远程服务（或其他一些异步加载机制）加载数据（在本例中为：User对象）时，我不真正得到的是我如何处理绑定。

我所尝试的是：

在constructor或ngOnInit中异步加载数据。问题：即使在加载开始之前也会引发异常（“无法读取未定义的属性'验证者'...”）
在constructor或ngOnInit中异步加载数据，但在此之前创建一个空表单。问题：验证不起作用。
我期望工作：将表单数据绑定到User对象的属性，并设置该对象的属性。问题：没有例外，但数据没有显示在表单中。

我想必须有一些更智能/更好的方法让这个工作？我对Angular2很新，所以我希望问题不是太愚蠢......

----更新----

首先，我忘了提及我在表单中使用ngFormModel - 如果它很重要。

和@Thierry：我认为“与表单绑定的临时空对象”是我尝试做的（上面提到的第3种方法）但是什么都行不通。确切地说，我试过这个：

constructor(private _formBuilder:FormBuilder) {
    this.user = new User;
    this.user.username = 'abc';
    this.form = this._formBuilder.group({
        'username': [this.user.username, Validators.required],
    });
}

这显示了用户名，但是当我移动将this.user.username设置为构造函数末尾的行时它甚至不起作用 - 我觉得这很令人惊讶，因为我希望数据绑定要小心这个。

Answer 1

我看到了几个解决方案：

仅当数据存在时才利用*ngIf显示表单
利用@CanActivate装饰器（如果使用路由）显示表单所在的组件，仅当数据存在时
使用临时空对象与表单绑定。当数据存在时，您可以使用收到的数据填充（或覆盖）此对象。

这是一个傻瓜：https://plnkr.co/edit/metUkOB7Sqfyr9DtCLR0?p=preview。

希望它可以帮到你，亨利

Answer 2

您可以在Control对象中分隔您的用户名和电子邮件，而不是将其附加到表单。你将有更多的控制权（你可以稍后更新）。

form: ControlGroup;
email: Control = new Control("");
name: Control = new Control("");
constructor(public fb: FormBuilder) {
 this.form = fb.group({
        email: this.email,
        name: this.name
    });

    setTimeout(() => {
        this.email.updateValue("invalid email");
        this.name.updateValue("Name");
    }, 3000);
}

Plunker example

Answer 3

您还可以在加载数据后更新FormGroup中的各个控件。例如：

this._http.get('/user/123')
    .map(response => response.json())
    .subscribe(user => {
        this.form.find('username').updateValue(user.username);
        this.form.find('email').updateValue(user.email);
    })

重要的是，您可以在formGroup中找到控件实例并更新其值。或者简单

this.form.controls.username.updateValue(user.username)

也可以。

Answer 4

使用this.form.setValues({username: this.user.username, mail: this.user.mail})

Angular2：表单构建+异步数据加载

4 个答案: