Angular响应式表单问题：输入值无法同步及按钮禁用逻辑异常

问题根源 #

1. 输入框未与FormControl绑定：登录输入组件的<input>未使用Angular响应式表单指令关联到FormGroup中的控件，导致输入值无法同步到表单模型。
2. 错误使用formGroupName：单个表单控件应使用formControlName，而非用于嵌套FormGroup的formGroupName。
3. 子组件未导入响应式表单模块：登录输入组件未引入ReactiveFormsModule，导致表单指令无法被识别。

分步修复 #

1. 修复登录输入布局组件 #

组件代码修改

添加ReactiveFormsModule到组件依赖，并调整输入属性命名更贴合用途：

import { Component, Input } from '@angular/core'
import { ReactiveFormsModule } from '@angular/forms';

type InputType = 'text' | 'password' | 'email'

@Component({
    selector: 'app-login-inupt-layout',
    imports: [ReactiveFormsModule],
    templateUrl: './login-input-layout.component.html',
    styleUrl: './login-input-layout.component.scss',
})
export class LoginInuptLayoutComponent {
    @Input() inputLabel: string = ''
    @Input() placeholder: string = ''
    @Input() inputName: string = ''
    @Input() inputType: InputType = 'text'
    @Input() formControlName: string = ''
}

模板代码修改

给<input>添加formControlName绑定，关联到父组件的FormControl：

<div class="login-container">
    <div class="form-input">
        <label [for]="inputName">{{ inputLabel }}</label>
        <input
            [placeholder]="placeholder"
            [id]="inputName"
            [type]="inputType"
            [formControlName]="formControlName"
        />
    </div>
    <ng-content></ng-content>
</div>

2. 修复LoginPage模板 #

将输入组件上错误的formGroupName替换为formControlName，传递对应的表单控件名：

<app-login-default-layout
    tittle="Welcome back"
    subtittle="Welcome back! Please enter your details."
    (submit)="submit()"
    [disablePrimaryButton]="!loginForm.valid"
>
    <form (ngSubmit)="submit()" [formGroup]="loginForm">
        <app-login-inupt-layout
            placeholder="Enter your email"
            formControlName="email"
            inputLabel="Email"
            inputType="email"
            inputName="email"
        >
        </app-login-inupt-layout>
        <app-login-inupt-layout
            placeholder="Enter your password"
            formControlName="password"
            inputLabel="Password"
            inputType="password"
            inputName="password"
        >
            <div class="checkboxWrapper">
                <div>
                    <input type="checkbox" />
                    <span>Remember me</span>
                </div>
                <span>Forgot password</span>
            </div>
        </app-login-inupt-layout>
    </form>
</app-login-default-layout>

3. 优化登录按钮触发逻辑（可选） #

遵循响应式表单最佳实践，让按钮直接触发表单的ngSubmit：
修改登录默认布局模板中的按钮：

<button
    [disabled]="disablePrimaryButton"
    type="submit"
    class="primary-btn"
>
    Login
</button>

同时移除LoginDefaultLayout组件中的submit方法和onSubmit事件发射器，由表单自身的ngSubmit处理提交逻辑。

验证效果 #

修复后：

• 输入框值会实时同步到loginForm模型
• 表单验证通过时（邮箱格式正确、密码长度≥3），登录按钮自动启用
• 点击提交按钮，控制台可正确打印loginForm.valid状态和表单值

内容的提问来源于stack exchange，提问作者Mantega