带有预填充数据的 Angular2 Form-validation

Question

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

问题：例如，仅更改描述（并保留服务器上的标题原样）时，标题将无效。例如，如果我更改最后一个字符（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

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

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

Answer 2

您的问题是因为您没有正确使用 FormControl。您不应绑定到 input 标记的 value 属性，因为这是 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 3

您输入的标题条件class无效

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

应该是：

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

带有预填充数据的 Angular2 Form-validation

Angular2 Form-validation with prefilled data

forms

angular2-forms

angular