带有预填充数据的 Angular2 表单验证

Posted 2023-03-13

【中文标题】带有预填充数据的 Angular2 表单验证

【英文标题】：Angular2 Form-validation with prefilled data

【发布时间】：2017-05-21 07:02:44

【问题描述】：

我有一个带有两个输入字段（文本）的表单。从头开始创建（= 没有信息）效果很好。如您所料，也许我想稍后更改这些值。

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

【问题讨论】：

如果您想要更具体的答案，请添加 http 调用的代码。

【参考方案1】：

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

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

【讨论】：

按需创建表单需要模板中的额外逻辑 (*ngIf="projectEditForm")，这听起来不是一个好主意。

【参考方案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>

【讨论】：

非常有帮助和准确的答案！非常感谢

【参考方案3】：

你的title输入类条件无效

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

应该是：

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

【讨论】：

没错，我改了问题的名字，所以在我的代码中是对的，对不起。