CODEWITHSUNDEEP
angularangular-forms
Maurice
Maurice

Reputation: 7381

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

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.

Upvotes: 2

Views: 5077

Answers (2)

Mwiza
Mwiza

Reputation: 8961

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>

Upvotes: 8

Ali Wahab
Ali Wahab

Reputation: 592

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

Upvotes: 1

Related Questions