Angular 5 Set default value on template driven form input

Question

I'm having trouble setting the value of a template driven form input. The value is coming from an editMovie object. 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:

<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 here I tried putting the value property in a two way data binding like this: [(value)] but that didn't work. Following this SO 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'

Does anybody know how to bind the value for a template driven form input?

You can set FormControl name to html, define it in .ts file and use patchValue or setValue.. — Merim
– Merim, Commented Mar 7, 2018 at 6:42
That's for reactive forms. The OP said template driven forms. — DeborahK
– DeborahK, Commented Mar 7, 2018 at 6:42
When using template-driven forms, your best bet is to use [(ngModel)] and NOT the value. ngModel is for two way binding, which sets the default and keeps the associated component property in sync. Binding also to the value property is most likely confusing things. — DeborahK
– DeborahK, Commented Mar 7, 2018 at 6:44
Thanks for the suggestion @DeborahK. How would I do that? In the docs, so far the only time I see them set a value is with options and they use [value]. How would I use [(ngModel)]? — Stephen Agwu
– Stephen Agwu, Commented Mar 7, 2018 at 6:47

DeborahK · Accepted Answer · 2018-03-07 06:54:55Z

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.

Also, according to this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

... the label for is expecting to match an input element's id property, not the name property. I also changed that above.

Collectives™ on Stack Overflow

Angular 5 Set default value on template driven form input

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related