web-dev-qa-db-ja.com

Angular 5テンプレート駆動型フォーム入力にデフォルト値を設定します

テンプレート駆動型フォーム入力の値を設定するのに問題があります。値は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>
_

最初のものは機能しませんが、2つ目は機能します。 SO質問 ここ 値プロパティを次のような双方向データバインディングに入れようとしました：[(value)]が機能しませんでした。 this SO質問__[ngValue]_を試してみましたが、ブラウザで解析エラーが発生しました_Can't bind to 'ngValue' since it isn't a known property of 'input'_

テンプレート駆動型フォーム入力の値をバインドする方法を誰かが知っていますか？

javascriptangularformsangular5angular-forms
4
Stephen Agwu

以下のコードを更新しました。コンポーネントコードが表示されないので、適切なバインディングを推測しました。

_<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プロパティと一致することを期待しています。上記も変更しました。

3
DeborahK