[英]angular 6 warning for using formControlName and ngModel
I recently upgraded the angular version to 6-rc.我最近将 angular 版本升级到 6-rc。 I got following warning
我收到以下警告
It looks like you're using ngModel on the same form field as formControlName.
看起来您在与 formControlName 相同的表单字段上使用 ngModel。 Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7
Angular v6 中不推荐使用 ngModel 输入属性和 ngModelChange 事件与响应式表单指令,并将在 Angular v7 中删除
For more information on this, see our API docs here: https://angular.io/api/forms/FormControlName#use-with-ngmodel
有关这方面的更多信息,请在此处查看我们的 API 文档: https : //angular.io/api/forms/FormControlName#use-with-ngmodel
What does it say exactly?它具体说了什么? the link does not have any fragment for
#use-with-ngmodel
该链接没有
#use-with-ngmodel
任何片段
I guess I need to remove ngModel
and use formGroup as my data binding object.我想我需要删除
ngModel
并使用 formGroup 作为我的数据绑定对象。
If you're looking for Angular 6 documentation right now then use https://next.angular.io如果您现在正在寻找 Angular 6 文档,请使用https://next.angular.io
https://next.angular.io/api/forms/FormControlName#use-with-ngmodel https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
So you have 3 options:所以你有3个选择:
use Reactive forms使用反应形式
use Template driven forms使用模板驱动的表单
silence warning (not recommended)静音警告(不推荐)
imports: [ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ]
Remove [(ngModel)]
from every field within formGroup contains formControlName
and set value in controller class as follows simply this.form.get('first').setValue('some value');
从
[(ngModel)]
每个字段中删除[(ngModel)]
包含formControlName
和控制器类中的设置值如下简单this.form.get('first').setValue('some value');
do not close or silence warnings explicitly不要明确关闭或静音警告
add添加
[ngModelOptions]="{standalone: true}"
You can read more from angular website https://angular.io/api/forms/NgModel您可以从 angular 网站https://angular.io/api/forms/NgModel阅读更多信息
So I stumbled upon this when trying to display users' avatars in mat-select
:所以我在尝试在
mat-select
显示用户的头像时偶然发现了这一点:
<mat-form-field [formGroup]="assignedToFormGroup">
<mat-select placeholder="Assign to" [(ngModel)]="assignedTo" formControlName="assignTo">
<mat-select-trigger>
<img style="vertical-align:middle;" aria-hidden
src="{{assignedToFormGroup.controls['assignTo'].value.photoUrl}}" height="20" />
<span>@{{assignedToFormGroup.controls['assignTo'].value.userName}}</span>
</mat-select-trigger>
<!-- {{user.userName}} -->
<mat-option *ngFor="let user of members" [value]="user">
<img style="vertical-align:middle;" aria-hidden src="{{user.photoUrl}}" height="20" />
<span>@{{user.userName}}</span>
</mat-option>
</mat-select>
In controller, the formGroup was defined this way:在控制器中,formGroup 是这样定义的:
public assignedToFormGroup: FormGroup;
I followed Sohail's advice and removed [(ngModel)]
from my HTML code:我遵循了 Sohail 的建议并从我的 HTML 代码中删除了
[(ngModel)]
:
<mat-form-field [formGroup]="assignedToFormGroup">
<mat-select placeholder="Assign to" formControlName="assignTo">
<mat-select-trigger>
<img style="vertical-align:middle;" aria-hidden
src="{{assignedToFormGroup.controls['assignTo'].value.photoUrl}}" height="20" />
<span>@{{assignedToFormGroup.controls['assignTo'].value.userName}}</span>
</mat-select-trigger>
<!-- {{user.userName}} -->
<mat-option *ngFor="let user of members" [value]="user">
<img style="vertical-align:middle;" aria-hidden src="{{user.photoUrl}}" height="20" />
<span>@{{user.userName}}</span>
</mat-option>
</mat-select>
That gave me errors when opening page - I tried to load photoUrl and userName from null, because by removing [(ngModel)] I also removed default selection in mat-select
.这在打开页面时给了我错误 - 我试图从 null 加载 photoUrl 和 userName,因为通过删除 [(ngModel)] 我也删除了
mat-select
默认mat-select
。
So I modified my controller to do the following: 1. Constructor:所以我修改了我的控制器以执行以下操作: 1. 构造函数:
this.assignedToFormGroup.controls['assignTo'].setValue({photoUrl: '', userName: ''});
Button action where I save my form - added following line:我保存表单的按钮操作 - 添加了以下行:
let assignedTo = this.assignedToFormGroup.controls['assignTo'].value;
That actually worked.那确实奏效了。 Now I'm setting default selection on page load and read selected value when submitting the form.
现在我在页面加载时设置默认选择并在提交表单时读取选定的值。 I'm aware that it's not the best and prettiest solution, but I thought I'll share it - might be a good starting point for better solution.
我知道这不是最好和最漂亮的解决方案,但我想我会分享它 - 可能是更好解决方案的一个很好的起点。
Using formControl(reactive Forms) is more straightforward coupled with Rxjs so Angular team changed use of it.使用 formControl(reactive Forms) 与 Rxjs 结合起来更直接,因此 Angular 团队改变了它的使用方式。
Change on html file更改 html 文件
<!-- [ngModel]='model' (ngModelChange)='changed($event)' -->
to到
[formControl]="myControl"
Change ts file更改 ts 文件
model: string;
modelChanged: Subject<string> = new Subject<string>();
changed(text: string) {
this.modelChanged.next(text);
}
this.modelChanged.pipe(
.subscribe(model => this.postErrorMessage = model);
to到
this.myControl.valueChanges.pipe(
.subscribe(model => this.postErrorMessage = model);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.