未显示来自@input 字段的值

Question

我正在尝试创建动态反应表单，但未显示该值

<div *ngFor="let deliveryAcross of (deliveriesAcross | async)!; let i = index;">
  <app-delivery-across
    [index]="i"
    [deliveryAcross]="deliveryAcross"
  ></app-delivery-across>
  {{ deliveryAcross | json }}
</div>

deliveryacross.component.ts

  @Input("deliveryAcross") deliveryAcross: IDeliverAcross;

  minFormControl: FormControl;
  errorStateMatcher: NextErrorStateMatcher;
  constructor(private change: ChangeDetectorRef, private store: Store) {
    this.deliveryAcross = {
      iso: "",
      min: 1,
      max: 2,
      shippingCents: 0,
      shippingEuros: 0,
    };

    this.minFormControl = new FormControl("", [
      Validators.required,
      Validators.min(1),
    ]);
    this.errorStateMatcher = new NextErrorStateMatcher();
  }

我不能使用 ngModel 因为它会导致只读错误，这就是我选择使用值的原因，但我的值没有显示，而是输入刷新回空

<mat-form-field
  class="full-width"
  [@transformRightLeftStateTrigger]="stateDown | async"
>
  <input
    matInput
    [formControl]="minFormControl"
    [errorStateMatcher]="errorStateMatcher"
    placeholder="Minimaal"
    appDeliveryAcross
    [value]="deliveryAcross.min"
    autocomplete="off"
    [key]="'min'"
    [component]="'delivery-across'"
    type="number"
  />
</mat-form-field>

为什么来自 deliveryAcross.min 的值没有显示在输入中？

Answer 1

发生这种情况是因为您同时使用 value 和 formControl 作为输入值的来源，因此 formControl 的初始值会覆盖 value一个。

您可以尝试使用一个源，例如formControl，然后使用ngOnChanges获取this.deliveryAcross输入的变化，这样您就可以将它再次写入formControl.

尝试以下操作：

ngOnInit() {
  // Move this part to the `ngOnInit` so you can read the value of `this.deliveryAcross` input,
  // and set it as initial value of the form-control.
  this.minFormControl = new FormControl(this.deliveryAcross?.min, [
    Validators.required,
    Validators.min(1)
  ]);
}

// implement `OnChanges` interface to get the input changes.
ngOnChanges(changes: SimpleChanges) {
  if(changes.deliveryAcross) {
    this.minFormControl.setValue(this.deliveryAcross?.min);
  }
}

<mat-form-field
  class="full-width"
  [@transformRightLeftStateTrigger]="stateDown | async"
>
  <input
    matInput
    [formControl]="minFormControl"
    [errorStateMatcher]="errorStateMatcher"
    placeholder="Minimaal"
    appDeliveryAcross
    autocomplete="off"
    [key]="'min'"
    [component]="'delivery-across'"
    type="number"
  />
</mat-form-field>

未显示来自@input 字段的值

Value that comes from an @input field is not being displayed

angular

typescript

ngrx

ngrx-store