黄兵的个人博客

It looks like you're using ngModel on the same form field as formControl

在使用Angular表单的时候出现了如下警告⚠：

It looks like you're using ngModel on the same form field as formControl.

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 a future version of Angular.

For more information on this, see our API docs here:

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

翻译过来就是：

看起来你正在使用ngModel与formControl在同一个窗体字段上。

支持使用 ngModel 输入属性和 ngModelChange 事件与反应式表单指令在Angular v6中已被废弃，并将被移除。在未来版本的Angular中。

有关这方面的更多信息，请看我们的API文档。

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

看了以下代码，出错的代码如下：

<div class="form-group row">
    <div class="col-lg-12">
        <mat-form-field appearance="fill">
            <mat-label>内 容</mat-label>
            <textarea matInput [formControl]="bodyFormControl" placeholder="请输入文章内容" rows="10"
                      [(ngModel)]="markdown" maxlength="5000" required></textarea>
            <mat-hint align="end">{{bodyFormControl.value?.length || 0}}/5000</mat-hint>
            <mat-error *ngIf="bodyFormControl.invalid">
                <mat-icon>info</mat-icon>请输入文章正文
            </mat-error>
        </mat-form-field>
    </div>
</div>
<div class="form-group row">
    <div class="col-lg-12">
        <mat-label class="markdown-label">内容预览</mat-label>
        <markdown [data]="markdown"></markdown>
    </div>
</div>

这里主要是使用Markdown，上面写文章下面预览，textarea同时出现了ngModel和formControl，所以需要修改。

修改之后的代码如下：

<div class="form-group row">
    <div class="col-lg-12">
        <mat-form-field appearance="fill">
            <mat-label>内 容</mat-label>
            <textarea matInput [formControl]="bodyFormControl" placeholder="请输入文章内容" rows="10"
                       maxlength="5000" required></textarea>
            <mat-hint align="end">{{bodyFormControl.value?.length || 0}}/5000</mat-hint>
            <mat-error *ngIf="bodyFormControl.invalid">
                <mat-icon>info</mat-icon>请输入文章正文
            </mat-error>
        </mat-form-field>
    </div>
</div>
<div class="form-group row">
    <div class="col-lg-12">
        <mat-label class="markdown-label">内容预览</mat-label>
        <markdown [data]="bodyFormControl.value"></markdown>
    </div>
</div>

这样整个警告就解除了。

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - It looks like you're using ngModel on the same form field as formControl