angular 默认下拉值 2 向绑定
angular default drop down value 2 way bound
我在 Angular 中有一个下拉列表，它是一个双向绑定的 FORM 控件。当表单加载时，我想做的就是在绑定值上设置一个默认值，以便它在下拉列表中显示该值。当我更改下拉列表中的值并打印到控制台时，我看到绑定是正确的。但是，第一次加载时，默认值不会显示在下拉列表中（未预选）。在此示例中，当表单加载时 "cow" 应该是默认选择的项目，但它在页面加载时不起作用。请告知代码中有什么问题。
以编程方式将值分配给您的 FormControl...
ngAfterViewInit(){
this.animalControl.setValue(this.animals[2]);
this.animalControl.markAsTouched();
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
}
Stackblitz
修订
使用 ngModel 和 FormControl 已被弃用并从 Angular 中删除 7...您应该开始习惯从 FormControl 访问值。
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
This has been deprecated for a few reasons. First, developers have
found this pattern confusing. It seems like the actual ngModel
directive is being used, but in fact it's an input/output property
named ngModel on the reactive form directive that simply approximates
(some of) its behavior. Specifically, it allows getting/setting the
value and intercepting value events. However, some of ngModel's other
features - like delaying updates withngModelOptions or exporting the
directive - simply don't work, which has understandably caused some
confusion.
In addition, this pattern mixes template-driven and reactive forms
strategies, which we generally don't recommend because it doesn't take
advantage of the full benefits of either strategy. Setting the value
in the template violates the template-agnostic principles behind
reactive forms, whereas adding a FormControl/FormGroup layer in the
class removes the convenience of defining forms in the template.
To update your code before v7, you'll want to decide whether to stick
with reactive form directives (and get/set values using reactive forms
patterns) or switch over to template-driven directives.
我在 Angular 中有一个下拉列表，它是一个双向绑定的 FORM 控件。当表单加载时，我想做的就是在绑定值上设置一个默认值，以便它在下拉列表中显示该值。当我更改下拉列表中的值并打印到控制台时，我看到绑定是正确的。但是，第一次加载时，默认值不会显示在下拉列表中（未预选）。在此示例中，当表单加载时 "cow" 应该是默认选择的项目，但它在页面加载时不起作用。请告知代码中有什么问题。
以编程方式将值分配给您的 FormControl...
ngAfterViewInit(){
this.animalControl.setValue(this.animals[2]);
this.animalControl.markAsTouched();
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
}
Stackblitz
修订
使用 ngModel 和 FormControl 已被弃用并从 Angular 中删除 7...您应该开始习惯从 FormControl 访问值。
console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
This has been deprecated for a few reasons. First, developers have found this pattern confusing. It seems like the actual ngModel directive is being used, but in fact it's an input/output property named ngModel on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of ngModel's other features - like delaying updates withngModelOptions or exporting the directive - simply don't work, which has understandably caused some confusion.
In addition, this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template.
To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.