HTMLビューでフォームコントロールの値を表示する方法 -- angular フィールド と angular-forms フィールド 関連 問題

How do i display the value of a form control in the html view?












0
vote

問題

日本語

これが超シンプルに聞こえることを知っていますが、私はそれを働かせることはできません。私はそれを表示するために口ひげタグを使う必要があることを知っていますが、フォームフィールドに何かを入力したときには表示されません。これが私のコードです:

 <コード> <label>Variety name: {{seedForm.get('varietyName').value}}</label>   

これは実際のフォームフィールドです:

<プレクラス= "LANG-HTML Prettyprint-Override"> <コード> <mat-form-field> <mat-label>Variety name</mat-label> <input matInput name="variety" type="text" placeholder="The name of the variety" autofocus formControlname="varietyName" required> </mat-form-field>

これはシードフォームの定義です:

<事前> <コード> this.seedForm = fb.group({ 'varietyName' : ['', Validators.required] })

私はこのコードが私が入力した値を表示しないのか理解できません。誰かが私が間違っていることを私に言うことができますか?

ありがとうございました。

英語

I know this sounds super simple but I can't get it to work. I know that I have to use the mustache tags to display it, but it just isn't displayed when I type something in the form field. Here is my code:

<label>Variety name: {{seedForm.get('varietyName').value}}</label> 

Here is the actual formfield:

<mat-form-field>     <mat-label>Variety name</mat-label>     <input matInput name="variety" type="text" placeholder="The name of the variety" autofocus         formControlname="varietyName" required> </mat-form-field> 

Here is the seedform definition:

this.seedForm = fb.group({   'varietyName' : ['', Validators.required] }) 

I don't understand why this code doesn't display the value I type in. Can anyone tell me what I'm doing wrong?

Thank you.

</div
     
         
         

回答リスト

1
 
vote
vote
ベストアンサー
 

Angularの文字列補間を介してHTMLテンプレート/ビューに値を次のように表示できます。

<事前> <コード> <div> <h5> Seed Variety </h5> {{seedForm.controls.varietyName.value}} </div>
 

You can display the value in the HTML template/view via angular's string interpolation as follows:

<div>     <h5> Seed Variety </h5>      {{seedForm.controls.varietyName.value}}  </div> 
</div
 
 
1
 
vote

こんにちは親タグにフォームグループを書く必要があります。また、init init init stackblitz < / A>

 

Hi you have to write formGroup on parent tag and also Init your form check this StackBlitz

</div
 
 

関連する質問

0  フォームアレイからの角度から  ( Angular getting from forms arrays ) 
Angular 6でCRUDアプリを作っていますが、ページの編集に進むと、そのページの入力フィールドに配列からデータを渡したいが、そのページデータを再度配列に保存する必要がある場合(できます。写真を見てください)私はそれをアレイのように保存しなければならない...

1  HTTP呼び出しで角度の形式のカスタムバリデータHTTP観察可能なNULLを返す  ( Angular form custom validator http observable returning null on http call ) 
電子メールが存在するかどうかを確認するフォームフィールドを設定しようとしています。私はいくつかの例を見て検証が行われてきましたが、私がHTTPパイプを実装するとき、私のサービスの観察可能なマップを行い、それをNULLとしてスローしますか?私は私のサービスからそ...

0  Angular 6:フォームを搭載したカレンダー/デートピッカーをどのようにしていますか?  ( Angular 6 how to intergarte calender date picker with form ) 
2つのDIVがあり、ユーザーが欲しい日付を選択できる日付ピッカー/カレンダーが含まれています、2秒には電子メール、Citym、Hotel、のフォームが含まれています。 だからユーザーは日付を選択してフォームを記入して、書籍をクリックして送信してください。 こ...

5  クエリパラメータを使用してテンプレート駆動型フォームを初期化します  ( Initialize template driven form with query parameters ) 
テンプレート駆動形式をクエリパラメータ値で初期化したいと思います。 直感的にフォームを作成して ngAfterViewInit :: に入力します。 HTML <事前> <コード> <form #f="ngForm"> <input type=...

0  子コンポーネントにカプセル化された角マットフォームフィールド  ( Angular mat form field encapsulated in child component ) 
子コンポーネントの<コード> mat-form-field をカプセル化する方法を示す簡単な例は? 私が欲しいもの <事前> <コード> <form [formGroup]="form"> <my-component formControlN...

0  新しい要素が追加されたときの既存のFormArray要素の角度更新の有効性  ( Angular updates validity of existing formarray elements when new element is adde ) 
そして私はこれを望んでいません。 FormArray の各要素を非同期的に検証しているので、バリデータは必要に応じて実行するだけで実行されます(すなわち、それらが本当に変更されたコントロールの値)。 FormArray の変更の場合には、新しい要素が追加さ...

0  FormGroupのどのプロパティをelevated ValueChangesイベントで識別する方法  ( How to identify which property in the formgroup emitted valuechanges event ) 
は入れ子状の群の構造です。 <事前> <コード> this.userProfileSettingsForm = fb.group({ general: fb.group({ language: [], them...

0  NGControlStatus(有効、無効、手付かず、汚れなど)が機能していません<select>  ( Ngcontrolstatus valid invalid pristine dirty etc not working on select ) 
私はmytest.pristineの条件で私の選択にクラスを追加しようとしているときにいくつかのフォーム検証をしようとしています。ただし、これは通常の入力でうまく機能します。下のマイ例をご覧ください。 <事前> <コード> <div class="form-g...

2  Mat-DatePickerを使用して挿入するときは無効です  ( Date invalid when inserting with mat datepicker ) 
フォーマット dd / mm / yyyy の入力を入力して日付を挿入する場合、フィールドは無効になります。フォームが無効になると、レコードを保存できません。 しかし、DatePickerを使用してフィールドが有効になる日付を挿入した場合。 DatePick...

7  FormGroupの作成時の関数ではありません  ( Control setparent is not a function when dymanically creating formgroup ) 
angular5を使用しています、そして私はフィールドのリストを持っています、それぞれの名前とformcontrolがあります。このコードを使用して、グループにコントロールを動的に追加しようとしますが、エラーが発生しました。 <事前> <コード> const...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有