Как определить @Input как FormControl?

Question

У меня есть следующий компонент:

@Component({
  selector: "form-component",
  template: ``
})
export class FormComponent {

  @Input() userInput?: string;

}

и теперь я хочу преобразовать элемент userInput (я всегда делаю привязки ввода необязательными, поскольку они могут не использоваться) в FormControl с помощьюзапись:

@Input() userInput = new FormControl("");

или это каким-либо образом противоречит механизму привязки?Что касается типов, это, кажется, не очень хорошая практика, потому что userInput больше не является string.

Мой вопрос

Как мне присвоить свойство@Input привязка к FormControl?

Предложение

Возможно, необходимо присвоить (вероятно) связанное значение в onInit следующим образом:

@Component({
  selector: "form-component",
  template: ``
})
export class FormComponent implements OnInit{

  @Input() userInput?: string;
  userControl: FormControl;

  ngOnInit() {
    this.userControl = new FormControl(this.userInput ? this.userInput : "");
  }

}

Answer 1

Самый простой способ:

@Component({
  selector: "form-component",
  template: ``
})
export class FormComponent {
  @Input()
  set userInput(v: string){
    this.userControl.setValue(v || "");
  }
  userControl: FormControl = new FormControl("");    
}

В зависимости от того, как вы планируете использовать этот компонент, может быть даже лучше реализовать интерфейс ControlValueAccessor.

Answer 2

Я предполагаю, что тип ввода - строка. Поэтому я бы связал это, как вы сделали в своем предложении. Но я бы сделал это при изменении, а не onInit.

 ngOnChanges() {
    this.userControl = new FormControl(this.userInput ? this.userInput : "");
  }

Я не могу понять, почему вы создали бы FormControl где-то еще и передали бы его в качестве ввода.