动态设置FormControl值后提交按钮未启用，如何标记为有效？

我来帮你分析下可能的问题点，以及对应的解决办法：

先梳理你的现有代码 #

你的HTML模板代码：

<input type="text" class="form-control" placeholder="Senders's Address" formControlName="senderAddress" #searchSenderAddress>

组件TS代码：

@ViewChild("searchSenderAddress") public searchSenderAddressRef:ElementRef; 
senderAddress = new FormControl("", [Validators.required, Validators.pattern(/^\S*$/)]); 

ngOnInit() { 
  if( this.senderFormattedAddress ){
    this.senderAddress.setValue( this.senderFormattedAddress ); // 设置控件值
  } 
}

可能的问题及解决方案 #

1. 控件未关联到FormGroup
   如果你在模板里用了[formGroup]指令（比如包裹整个表单的<form [formGroup]="xxx">），但没把senderAddress这个FormControl加入到对应的FormGroup中，表单的整体校验状态不会包含这个控件的状态，提交按钮的禁用逻辑如果绑定的是表单组的valid属性，自然不会生效。

   解决办法：在组件中创建FormGroup并包含该控件：

   // 组件内添加FormGroup定义
   senderForm = new FormGroup({
     senderAddress: this.senderAddress
   });
   

   模板里也要对应绑定表单组：

   <form [formGroup]="senderForm">
     <!-- 你的输入框 -->
     <button type="submit" [disabled]="!senderForm.valid">提交</button>
   </form>
   

2. 设置值后未触发校验更新
   手动设置值后，Angular有时不会自动触发校验状态更新，只调用markAsTouched()可能不够，需要强制更新控件的校验状态。

   解决办法：在设置值后调用updateValueAndValidity()方法：

   ngOnInit() { 
     if( this.senderFormattedAddress ){
       this.senderAddress.setValue( this.senderFormattedAddress );
       // 强制更新值和校验状态，emitEvent设为false避免触发不必要的valueChanges事件
       this.senderAddress.updateValueAndValidity({ emitEvent: false });
       this.senderAddress.markAsTouched();
     } 
   }
   

3. 校验规则不匹配
   你的senderAddress设置了Validators.pattern(/^\S*$/)，这个规则要求输入内容不能包含任何空格。你需要确认this.senderFormattedAddress的值是否符合这个规则——如果地址里有空格，控件会一直处于invalid状态，提交按钮当然不会启用。

   排查办法：设置值后打印控件错误信息，确认问题：

   ngOnInit() { 
     if( this.senderFormattedAddress ){
       this.senderAddress.setValue( this.senderFormattedAddress );
       this.senderAddress.updateValueAndValidity();
       console.log(this.senderAddress.errors); // 查看具体错误类型
     } 
   }
   

   如果是pattern不匹配，要么调整senderFormattedAddress的值，要么修改正则规则（比如允许空格可以改成/^[\s\S]*$/，或者更贴合地址格式的正则）。

4. 提交按钮的禁用逻辑绑定错误
   检查提交按钮的disabled属性绑定的是单个控件的valid，还是整个表单组的valid。如果绑定的是表单组的状态，要确保所有表单控件都符合校验规则。

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