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 问题 I tried putting the value property in a two way data binding like this: [(value)] but that didn't work. Following this 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)] 定义的 two-way 绑定采用组件的属性的值并将其指定为默认值。当用户对值进行任何更改时，该值将在组件的属性中进行修改，基本上保持输入元素和组件属性同步。

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

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

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

Angular 5 Set default value on template driven form input

javascript

angular

forms

angular5

angular-forms