Angular 19响应式表单无响应：输入值无法同步JSON展示求助

你的表单无响应的核心原因是**formControlName绑定位置错误**——应该把这个属性直接加到<input>元素上，而不是父级的mat-form-field容器上。

修改后的模板代码 #

<form action="" [formGroup]="LoginForm">

  <mat-form-field class="example-full-width">
    <mat-label>Login</mat-label>
    <input matInput placeholder="" formControlName="loginFormControl">
  </mat-form-field>

  <p> Value: {{ LoginForm.value | json }}</p>
  <label>Пароль</label>

  <mat-form-field class="example-full-width">
    <mat-label>Password</mat-label>
    <input matInput placeholder="" formControlName="passwordFormControl">
  </mat-form-field>
  
  <p> Value {{ LoginForm.value | json }}</p>
  
  <button type="submit">Увійти</button>
</form>

关键修改点 #

• 移除mat-form-field上的formControlName属性
• 将formControlName="loginFormControl"和formControlName="passwordFormControl"分别添加到对应的<input>标签上

原因说明 #

Angular响应式表单的formControlName需要直接关联到具体的表单控件（如<input>），这样输入框的内容变化才能被Angular捕获并同步到LoginForm的value中。之前绑定在容器元素上，Angular无法监听输入事件，所以表单值始终不会更新。

你的组件代码没有问题，不需要修改，只要调整模板中formControlName的位置即可解决问题。

内容的提问来源于stack exchange，提问作者Михайло Митровці