10

我有一个使用表单生成器（Angular2 Beta 1，TypoScript）创建的表单，即：有这样的东西constructor：

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

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

我尝试过的是：

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

我想必须有一些更聪明/更好的方法来让它工作？我对 Angular2 比较陌生，所以我希望这个问题不会太愚蠢……</p>

- - 更新 - -

首先，我忘了提及我ngFormModel在表格中使用的内容——以防万一它很重要。

@Thierry：我认为“与表单绑定的临时空对象”是我尝试做的（上面提到的第三种方法），但没有奏效。准确地说，我试过这个：

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——我觉得这很令人惊讶，因为我希望数据绑定来处理这个问题。

4

4 回答 4

6

您可以在 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 示例

于 2016-02-03T16:02:21.953 回答
6

我看到了几个解决方案：

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

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

希望它可以帮助你，蒂埃里

于 2016-02-03T15:49:18.373 回答
5

您还可以在加载数据后更新 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 one 中找到控件实例并更新其值。或者简单

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

也可以。

UPD。请注意，在最近的版本中，API 已更改，因此您需要username使用 getter 访问：

this.form.get('username').setValue(user.username)
于 2016-02-03T16:21:10.240 回答
0

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

于 2016-12-05T16:35:28.647 回答