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问题here之后，我尝试将value属性放入双向数据绑定中，如下所示：[(value)]但这不起作用。在this出现问题之后，我尝试了[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属性。我也改变了上面的内容。

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

1 个答案: