Angular响应式表单：按钮无法随FormControl有效性切换状态求助

核心问题 #

1. 按钮禁用逻辑绑定错误：你直接给disabled赋值字符串"(userName.value === '')"，Angular会把它当作固定值，不会动态判断输入框内容变化。
2. 响应式表单校验未正确配置：HTML中的required属性对响应式表单的FormControl无效，必须在TS里为FormControl添加校验器才能启用表单状态判断。
3. 禁用判断逻辑不够严谨：直接判断value === ''无法覆盖其他可能的校验场景，应该利用FormControl本身的valid状态来判断。

修复后的代码 #

sample.html

<label for="name">Name: </label>
<input type="text" [formControl]="userName">
<p>Value: {{ userName.value }}</p>
<button [disabled]="!userName.valid">提交</button>

Sample.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.html'
})
export class SampleComponent implements OnInit {
    userName = new FormControl('', Validators.required)

    ngOnInit(): void {      
        console.log("entered")
        console.log(this.userName.getRawValue());         
    }    
}

修复说明 #

• 把按钮的disabled="(userName.value === '')"改成[disabled]="!userName.valid"，通过属性绑定动态判断表单控件的合法性。
• 在FormControl初始化时添加Validators.required校验器，让Angular自动跟踪输入框的校验状态。
• 移除HTML输入框上的required属性，响应式表单的校验规则统一在TS中配置。
• 补充组件元数据中必需的selector和templateUrl，确保组件能正常渲染。

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