Мне нужно заполнить выбранную опцию от выбранного углового элемента материала до текстовой области. Я использую 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
Для угловых 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');
}
.
.
.
}