Question

我有一个带有两个输入字段（文本）的表单。从头开始创建（=无信息）效果很好。你可以猜到，也许我想稍后改变这些值。

问题：当仅更改描述时（并将标题保留为服务器），标题将无效。如果我将最后一个char（Testproject更改为Testproject2）更改，例如它可以工作。我需要改变什么？

模板：

this.projectEditForm = this._fb.group({
    Title: ['', [<any>Validators.required, <any>Validators.minLength(5)]],
    Description: ['', [<any>Validators.required]]
});

表单模型：

num

Answer 1

您的问题来自于您未正确使用FormControl这一事实。您不应该绑定value代码的input属性，因为它是FormControl的工作。

绑定到value属性时，您正在写入dom而不通知FormControl某些内容已发生变化。

您应该使用FormControl动态设置值。当您从http接收数据时，您只需要调用它：

this.projectEditForm.get("controlName").setValue(randomValueFromSomewhere);

在您的模板中（请注意，我删除了类更简洁）：

<div [formGroup]="projectEditForm">
  <label>Title</label>
  <input type="text" formControlName="Title">
  <label>Description</label>
  <textarea formControlName="Description"></textarea>
</div>

Answer 2

标题输入类的条件无效

[class.validationError]="projectEditForm.controls.Name.invalid && (projectEditForm.controls.Description.dirty || submitted)"

应该是：

[class.validationError]="projectEditForm.controls.Title.invalid && (projectEditForm.controls.Title.dirty || submitted)"

Answer 3

尝试在http调用成功时初始化表单组，然后：

this.projectEditForm = this._fb.group({
    Title: [project.ProjectName, [<any>Validators.required, <any>Validators.minLength(5)]],
    Description: [project.Description, [<any>Validators.required]]
});

Angular2表格验证与预填充数据

3 个答案: