[已解决-Angular 8的ngModel解

问题描述 投票:0回答:3

我需要将选择的选项从选择的角度材质元素填充到文本区域。我正在使用ngModel,它可以正常工作,但在控制台中收到如下错误:

It looks like you're using ngModel on the same form field as formControlName. 
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.

For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel

不推荐使用Angular 8 ngModel,所以有人可以给我一个解决方案吗?

我的代码如下:

myComponent.component.html

<form class="reminder-message" [formGroup]="reminderMessageForm" #f="ngForm" (ngSubmit)="reminderMessage(f.value)">
    <mat-form-field class="full-width select">
        <mat-select formControlName="option" placeholder="Choose a reminder" [(ngModel)]="selectedReminder" (selectionChange)="onChange($event)">
            <mat-option *ngFor="let opt of optionMessages" [value]="opt.message">{{ opt.option }}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field class="full-width textarea-message">
        <textarea matInput formControlName="reminder" value="{{ selectedReminder }}" cols="5" rows="7" readonly></textarea>
    </mat-form-field>

    <mat-dialog-actions class="actions" align="end">
        <button mat-button class="send-message action" [disabled]="!buttonDisabled" type="submit">
            <span>Send</span>
        </button>
        <button mat-button mat-dialog-close class="close action" (click)="closeDialog()">
            <span>Close</span>
        </button>
    </mat-dialog-actions>
</form>

myComponent.component.ts

export class myComponent implements OnInit {
  buttonDisabled: boolean = false;
  .
  .
  .
  optionMessages = [
    { id: 1, option: 'Message 1',  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam bibendum nisi, a malesuada metus consectetur vitae. Proin eget metus eu orci vehicula bibendum ut ut lectus.' },
    { id: 2, option: 'Message 2',  message: 'Quisque et nisl nec mi placerat iaculis. Phasellus dapibus dui tempor, efficitur ligula ut, semper eros. Praesent scelerisque, odio sit amet elementum ornare, ex neque porttitor ipsum, nec sollicitudin mi leo sit amet sapien. Donec porttitor sapien sit amet libero dapibus consequat.' },
    { id: 3, option: 'Message 3',  message: 'Nam accumsan fringilla sapien, ac blandit nunc placerat in. Integer ut est interdum dolor ullamcorper bibendum. Pellentesque dignissim erat vitae eros malesuada lobortis. Praesent pharetra, nunc a hendrerit commodo, diam eros fringilla erat, sit amet porttitor odio erat egestas dolor. Sed pellentesque sed diam a egestas. Integer non rhoncus augue.' },
    { id: 4, option: 'Message 4',  message: 'Donec egestas elit sapien, in dictum mauris euismod ac. Maecenas gravida leo eget quam placerat lobortis. Praesent risus elit, congue sit amet metus egestas, porta aliquam sem. Nam blandit auctor odio non fringilla.' },
    { id: 5, option: 'Message 5',  message: 'Quisque efficitur egestas lectus ut molestie. Mauris eleifend ligula nec dignissim tempus. Aenean nec quam pellentesque, eleifend metus id, efficitur tellus.' },
  ];

  reminderMessageForm = new FormGroup({
    option: new FormControl('', Validators.required),
    reminder: new FormControl('', [ Validators.required, Validators.minLength(15) ]),
  });

  get reminder() {
    return this.reminderMessageForm.get('message');
  }
  .
  .
  .
}
angular angular-material angular8
3个回答
2
投票

您正在混合使用模板驱动表单和响应表单。

您的代码中的selectedReminder吗?

formControlName="option"

与]相关>

option: new FormControl('', Validators.required),

0
投票

基于Angular的公开文档,Form Control use with NgModel


0
投票

使用一种方法:反应形式方法

© www.soinside.com 2019 - 2024. All rights reserved.