Angular动态响应式表单@Input传入的值绑定后未在输入框展示

• 响应式表单优先级冲突：当你同时给输入框绑定[formControl]和原生[value]属性时，Angular响应式表单的FormControl值优先级远高于原生value绑定，你初始化minFormControl时传入的是空字符串""，所以输入框始终显示为空，你绑定的[value]不会生效。
• @Input传入时机与同步逻辑缺失：@Input属性的赋值操作是在组件构造函数执行完成后才触发的，你在constructor中给deliveryAcross设置的初始值会被后续父组件传入的值覆盖，同时你没有监听@Input的变化，也没有把传入的deliveryAcross.min同步到minFormControl中，自然无法显示传入的值。
• 额外说明：你使用ngModel报错是因为Angular不允许在同一个输入框上同时混用响应式表单指令[formControl]和模板驱动表单指令[(ngModel)]，属于官方明确不推荐的用法，你放弃ngModel的选择是正确的。

1. 首先删除模板中输入框的[value]="deliveryAcross.min"绑定，避免不必要的冲突。
2. 在子组件中实现OnChanges生命周期钩子，监听deliveryAcross的变化，将传入的值同步到FormControl中：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
// 其余原有导入保持不变

export class DeliveryAcrossComponent implements OnChanges {
  @Input("deliveryAcross") deliveryAcross: IDeliverAcross;
  minFormControl: FormControl;
  errorStateMatcher: NextErrorStateMatcher;

  constructor(private change: ChangeDetectorRef, private store: Store) {
    // constructor中给deliveryAcross赋值的代码可以删除，会被后续@Input传入的值直接覆盖
    this.minFormControl = new FormControl("", [
      Validators.required,
      Validators.min(1),
    ]);
    this.errorStateMatcher = new NextErrorStateMatcher();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 检测deliveryAcross输入值变化，同步到FormControl
    if (changes['deliveryAcross'] && this.deliveryAcross) {
      // emitEvent设为false可以避免触发不必要的valueChanges订阅事件
      this.minFormControl.setValue(this.deliveryAcross.min, { emitEvent: false });
    }
  }
}

3. 如果你需要将输入框的修改同步回父组件，可以订阅minFormControl.valueChanges，通过@Output事件将修改后的值传递给父组件更新数据源即可。

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