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

Question

我在设置模板驱动的表单输入的值时遇到问题。该值来自一个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 问题，我尝试将 value 属性置于像这样的双向数据绑定中：[(value)]但这不起作用。按照这个SO 问题，我尝试过，[ngValue]但这在浏览器中引发了解析错误Can't bind to 'ngValue' since it isn't a known property of 'input'

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

Answer 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属性。我上面也改了。