'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.

angular angular-forms

Solution 1:^[1]

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>

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ali Wahab

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]