javascript Angular 5 在模板驱动的表单输入上设置默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49145654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 Set default value on template driven form input
提问by Stephen Agwu
I'm having trouble setting the value of a template driven form input. The value is coming from an editMovieobject. I want the form to be filled with the editMovie values when shown and the user can then edit a part of the editMovie object or leave it the same. The form value is being set correctly for inputs that don't have [(ngModel)]attachted to them but the one's that do won't set a default value. Here is an example:
我在设置模板驱动的表单输入的值时遇到问题。该值来自一个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>
The first one doesn't work while the second one does. Following SO questions hereI tried putting the value property in a two way data binding like this: [(value)]but that didn't work. Following thisSO question I tried [ngValue]but this threw a parse error in the browser Can't bind to 'ngValue' since it isn't a known property of 'input'
第一个不起作用，而第二个起作用。按照此处的SO 问题，我尝试将 value 属性置于像这样的双向数据绑定中：[(value)]但这不起作用。按照这个SO question 我试过了，[ngValue]但这在浏览器中引发了解析错误Can't bind to 'ngValue' since it isn't a known property of 'input'
Does anybody know how to bind the value for a template driven form input?
有人知道如何绑定模板驱动的表单输入的值吗？
回答by DeborahK
I've updated your code below. I don't see any component code, so I guessed on the appropriate bindings.
我已经在下面更新了您的代码。我没有看到任何组件代码，所以我猜测了适当的绑定。
<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>
The two-way binding defined by [(ngModel)]takes the value of the component's property and assigns it as the default. As the user makes any change to the value, that value is then modified in the component's property, basically keeping the input element and component property in sync.
定义的双向绑定[(ngModel)]获取组件属性的值并将其分配为默认值。当用户对值进行任何更改时，该值会在组件的属性中进行修改，基本上保持输入元素和组件属性同步。
Also, according to this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
另外，根据这个：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/label
... the label foris expecting to match an input element's idproperty, not the nameproperty. I also changed that above.
...label for期望匹配输入元素的id属性，而不是name属性。我上面也改了。
