Question

我具有以下组件：

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

  @Input() userInput?: string;

}

现在，我想通过写：

将成员userInput（我总是使Input绑定成为可选的，因为可能不会使用它们）转换为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

我假设输入的类型是字符串。因此，我将像您在建议中所做的那样将其绑定。但是我会在更改时执行此操作，而不是onInit。

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

我想不出为什么要在其他地方创建FormControl并将其作为输入传递。

Answer 2

最简单的方法：

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

根据您计划使用此组件的方式，实现ControlValueAccessor接口可能会更好。

如何将@Input定义为FormControl？

2 个答案: