Простое решение для другой модели и просмотра значения в Реактивном контроле ввода в Angular

Question

У меня есть formControl со значением, установленным для объекта, например {id: 1, name: 'Ramesh'}. Поле ввода внутри mat-form-field предназначено только для чтения, а значение либо поступает из базы данных, либо выбирается из списка выбора.

Чтобы показать другое значение просмотра Я использую [value] привязку как показано ниже. Он правильно отображается, когда элемент управления позже обновляется пользователем. Но когда он инициализируется в первый раз с сохраненным значением, он показывает [object Object].

Внутренне это зависит от порядка выполнения привязки DefaultValueAccessor writeValue method и [value].

https://stackblitz.com/edit/angular-ivy-mkvx8a?file=src%2Fapp%2Fapp.component.ts

<input readonly [formControl]="userControl" [value]="userControl.value?.name">

Я думал создать собственный аксессуар значения, но это кажется слишком большим.

Answer 1

Я решил это, расширив DefaultValueAccessor и предоставив собственный метод writeValue. Но я считаю, что angular должен предоставить возможность только для пользовательского writeValue метода.

Например, mat autocomplete has displayWith

Demo: https://stackblitz.com/edit/angular-ivy-mkvx8a?file=src%2Fapp%2Fapp.component.html

<input valueKeyAccessor [formControl]="control">

@Directive({
  selector: "input[valueKeyAccessor]",
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => valueKeyAccessor),
      multi: true
    }
  ]
})
export class valueKeyAccessor extends DefaultValueAccessor {
  @Input("valueKeyAccessor") propToDisplay;

  writeValue: any;
  constructor(
    _renderer: Renderer2,
    _elementRef: ElementRef,
    @Optional() @Inject(COMPOSITION_BUFFER_MODE) _compositionMode: boolean
  ) {
    // Refer signature from https://github.com/angular/angular/blob/9.1.11/packages/forms/src/directives/default_value_accessor.ts#L36-L156
    super(_renderer, _elementRef, _compositionMode);
    // overwriting the writeValue    
    this.writeValue = value => {
      value = value && value[this.propToDisplay];
      const normalizedValue =
        (value === undefined || value === null) ? "" : value;
      super.writeValue(normalizedValue);
    };
  }

  ngOnInit() {
    this.propToDisplay = this.propToDisplay || "name";
  }
}