Как отобразить значение элемента управления формы в представлении html?

Я знаю, что это звучит очень просто, но я не могу заставить его работать. Я знаю, что мне нужно использовать теги усов, чтобы отобразить его, но он просто не отображается, когда я что-то набираю в поле формы. Вот мой код:

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

Вот фактическое поле формы:

<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]
})

Я не понимаю, почему этот код не отображает введенное мной значение. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Спасибо.

Решение проблемы

Вы можете отобразить значение в шаблоне/представлении HTML с помощью интерполяции строк Angular следующим образом:

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