Angular 5在模板驱动的表单输入上设置默认值答案

【问题标题】：Angular 5 Set default value on template driven form inputAngular 5在模板驱动的表单输入上设置默认值
【发布时间】：2018-08-15 04:27:23
【问题描述】：

我在设置模板驱动表单输入的值时遇到问题。该值来自editMovie 对象。我希望在显示时用 editMovie 值填充表单，然后用户可以编辑 editMovie 对象的一部分或保持不变。对于没有附加[(ngModel)] 的输入，表单值已正确设置，但不会设置默认值的输入。这是一个例子：

<div class="form-group">
    <label for="imdb">Edit IMDb ID</label>
    <input #editImdb type="text" class="form-control" name="imdb" [(ngModel)]="editReviewForm.imdb" [value]="editMovie.imdb" required="" />
    <div class="mt-1" style="color:red">
        *required
    </div>
</div>

<div class="form-group">
    <label for="trailer">Edit Youtube Trailer</label>
    <input #editTrailer type="text" class="form-control" name="trailer" value="{{ editMovie.trailer }}" />
</div>

第一个不起作用，而第二个起作用。在 SO 问题here 之后，我尝试将 value 属性放在像这样的双向数据绑定中：[(value)] 但这不起作用。在this SO 问题之后，我尝试了[ngValue]，但这在浏览器Can't bind to 'ngValue' since it isn't a known property of 'input' 中引发了解析错误@

有人知道如何为模板驱动的表单输入绑定值吗？

【问题讨论】：

您可以将FormControl名称设置为html，在.ts文件中定义它并使用patchValue或setValue..
那是响应式表单。 OP 表示模板驱动的表单。
使用模板驱动的表单时，最好的办法是使用[(ngModel)] 而不是value。 ngModel 用于双向绑定，设置默认值并保持关联的组件属性同步。还绑定到 value 属性很可能会造成混淆。
感谢@DeborahK 的建议。我该怎么做？在文档中，到目前为止，我唯一一次看到他们设置值是使用选项，他们使用[value]。我将如何使用[(ngModel)]？
angular.io/guide/template-syntax#two-way-binding---

标签： javascript angular forms angular5 angular-forms

【解决方案1】：

我在下面更新了您的代码。我没有看到任何组件代码，所以我猜测了适当的绑定。

<div class="form-group">
    <label for="imdb">Edit IMDb ID</label>
    <input #editImdb type="text" class="form-control" 
           id="imdb" [(ngModel)]="editMovie.imdb" required />
    <div class="mt-1" style="color:red">
        *required
    </div>
</div>

<div class="form-group">
    <label for="trailer">Edit Youtube Trailer</label>
    <input #editTrailer type="text" class="form-control" 
           id="trailer" [(ngModel)]="editMovie.trailer" />
</div>

[(ngModel)] 定义的双向绑定采用组件属性的值并将其分配为默认值。当用户对值进行任何更改时，该值会在组件的属性中进行修改，基本上保持输入元素和组件属性同步。

另外，据此：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

... label for 期望匹配输入元素的 id 属性，而不是 name 属性。我在上面也改了。

【讨论】：