Question

我在Angular中有一个下拉菜单，它是2向绑定的FORM控件。当表单加载所有我想做的事时，请在绑定值上设置一个默认值，以便它在下拉列表中显示该值。当我在下拉菜单中更改值并打印到控制台时，我看到绑定是正确的。但是，它第一次加载默认值不会显示在下拉列表中（未预先选择）。在此示例中，当表单加载时，“ cow”应为默认选中项，但不适用于页面加载。请告知代码中的错误。

https://stackblitz.com/edit/angular-error-initial

Answer 1

以编程方式将值分配给您的FormControl ...

   ngAfterViewInit(){
    this.animalControl.setValue(this.animals[2]);
    this.animalControl.markAsTouched();
    console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
  }

Stackblitz

https://stackblitz.com/edit/angular-error-initial-atr11t?embed=1&file=app/select-hint-error-example.ts

修订

不建议将ngModel和FormControl一起使用，并且已从Angular 7中删除了它。...您应该开始习惯于从FormControl访问值。

console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))

https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

由于某些原因，已弃用此文件。首先，开发人员有   发现这种模式令人困惑。看起来像实际的ngModel   指令正在使用，但实际上是输入/输出属性   在简单近似的反应形式指令上命名为ngModel   （某些）行为。具体来说，它允许获取/设置   价值和拦截价值事件。但是，ngModel的其他一些   功能-例如使用ngModelOptions延迟更新或导出   指令-根本不起作用，这可以理解地引起了一些   混乱。

此外，此模式混合了模板驱动形式和反应形式   策略，我们通常不建议这样做，因为它不需要   两种策略的全部优点的优势。设定值   模板中的内容违反了与模板无关的原则   反应性表单，而在表单中添加FormControl / FormGroup层   类消除了在模板中定义表单的便利。

要在v7之前更新代码，您需要决定是否坚持   使用反应形式指令（以及使用反应形式获取/设置值）   模式）或切换到模板驱动的指令。

角度默认下拉值2向界

1 个答案: