Angular2表格验证与预填充数据

Question

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

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

模板:

<form [formGroup]="projectEditForm" novalidate>
    <div [formGroup]="projectEditForm">

        <label>Title</label>
        <input type="text" [class.validationError]="projectEditForm.controls.Title.invalid && (projectEditForm.controls.Title.dirty || submitted)"
                   value="{{ (project | async)?.ProjectName }}" formControlName="Title">

        <label>Description</label>
        <textarea [class.validationError]="projectEditForm.controls.Description.invalid && (projectEditForm.controls.Description.dirty || submitted)"
                   value="{{ (project | async)?.Description }}" formControlName="Description"></textarea>
    </div>
</form>

表格型号:

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

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>