Angular：如何向FormBuilder.group()传变量？Validators.max绑定失效

我尝试将变量传入Validators.max()方法，但无法生效，请问我哪里出错了？

模型实现（maximums.model.ts） #

export class Maximums {
   id: number;
   max_hr_1: number; 
   max_hr_2: number;
}

服务实现（maximums.service.ts） #

export class MaximumsService {

  (...)

  constructor(private http: HttpClient) { }

  listMaxs(): Observable<Maximums> {
    return this.http.get<Maximums>('http://localhost:8081/maximums/list'); 
  }  
}

组件实现（activity-form.component.ts） #

(...)
export class ActivityFormComponent implements OnInit{

maximums: Maximums;
max_hr_1: number; 
max_hr_2: number; 

constructor(private fb: FormBuilder, private maximumsService: MaximumsService){ }

ngOnInit(): void {

   this.maximums = new Maximums();
   this.getMaxs();

   fg: FormGroup;

   this.fg = this.fb.group({
   hr_1: [null, Validators.max(this.max_hr_1)],
   hr_2: [null, Validators.max(this.max_hr_2)],
   });
}

getMaxs(): void {
    this.maximumsService.listMaxs().subscribe(
      (data) => {
        this.maximums = data;
        this.max_hr_1 = this.maximums.max_hr_1; 
        this.max_hr_2 = this.maximums.max_hr_2;
      },
      (erro) => {
        console.log(erro);
      }
    );
  }


(...)

模板实现（activity-form.component.html） #

(...)

<form name="form" [formGroup]="fg" #f="ngForm">
   <input matInput min="1" type="number" formControlName="hr_1" />
   <mat-error *ngIf="fg.controls['hr_1'].hasError('max')">Maximum is {{max_hr_1}}</mat-error>

   <input matInput min="1" type="number" formControlName="hr_2" />
   <mat-error *ngIf="fg.controls['hr_2'].hasError('max')">Maximum is {{max_hr_2}}</mat-error>
</form>

(...)

无效写法：

Validators.max(this.max_hr_1)

无效写法：

Validators.max(this.maximums.max_hr_1)

解决办法 #

核心原因 #

你在ngOnInit里初始化表单时，getMaxs()的HTTP请求还未完成，此时max_hr_1和max_hr_2都是undefined，Validators.max(undefined)相当于未设置最大值验证，因此验证器无法生效。

方案一：请求完成后再创建表单 #

将表单初始化逻辑移到HTTP请求的回调中，确保拿到后端数据后再创建表单：

ngOnInit(): void {
   this.maximums = new Maximums();
   this.getMaxs();
}

getMaxs(): void {
    this.maximumsService.listMaxs().subscribe(
      (data) => {
        this.maximums = data;
        this.max_hr_1 = this.maximums.max_hr_1; 
        this.max_hr_2 = this.maximums.max_hr_2;
        // 拿到数据后初始化表单
        this.initForm();
      },
      (erro) => {
        console.log(erro);
      }
    );
}

initForm(): void {
  this.fg = this.fb.group({
    hr_1: [null, Validators.max(this.max_hr_1)],
    hr_2: [null, Validators.max(this.max_hr_2)],
  });
}

方案二：动态更新验证器 #

先创建基础表单，等请求拿到数据后，动态修改表单控件的验证规则：

ngOnInit(): void {
   this.maximums = new Maximums();
   // 先初始化无max验证的表单
   this.fg = this.fb.group({
     hr_1: [null],
     hr_2: [null],
   });
   this.getMaxs();
}

getMaxs(): void {
    this.maximumsService.listMaxs().subscribe(
      (data) => {
        this.maximums = data;
        this.max_hr_1 = this.maximums.max_hr_1; 
        this.max_hr_2 = this.maximums.max_hr_2;
        
        // 动态更新验证器，需保留原有验证器的话要一起传入
        this.fg.get('hr_1')?.setValidators([Validators.max(this.max_hr_1)]);
        this.fg.get('hr_2')?.setValidators([Validators.max(this.max_hr_2)]);
        // 更新控件状态，触发验证逻辑
        this.fg.get('hr_1')?.updateValueAndValidity();
        this.fg.get('hr_2')?.updateValueAndValidity();
      },
      (erro) => {
        console.log(erro);
      }
    );
}

注意事项 #

• 如果需要保留其他验证规则（如必填），在setValidators中需传入所有验证器数组，例如[Validators.required, Validators.max(this.max_hr_1)]
• 必须调用updateValueAndValidity()，否则新的验证规则不会立即触发验证

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