Использование реактивных элементов управления с всплывающим окном Mat - Angular 7 - PullRequest
Новая
       15

Использование реактивных элементов управления с всплывающим окном Mat - Angular 7

0 голосов
/ 23 января 2020

Я успешно могу передать свои данные из моего всплывающего окна в родительский компонент с помощью ng-модели. Однако с реактивными формами вы не можете использовать ngModel. Вы должны использовать formcontrolname, и я не могу передать данные. Из моего исследования я должен использовать this.myform.input.value. но как мне это сделать без ngmodel. Я использую этот пост в качестве ссылки: как передать данные из angular диалогового окна материала в родительский компонент?

. HTML

    <form [formGroup]="myForm">
<div>
    <mat-form-field class="m-card">
        <input formControlName="input" matInput placeholder="Entry">
    </mat-form-field>


         <mat-form-field>
            <input matInput [matDatepicker]="dp" placeholder=" Date" formControlName="date" [(ngModel)]="data.date">
            <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
            <mat-datepicker #dp></mat-datepicker>
          </mat-form-field>


    </div>
  </div>

  <div mat-dialog-actions>
    <button mat-raised-button color="primary" (click)="onCancelClick()">Cancel</button>
    <button mat-raised-button color="primary" [mat-dialog-close]="data" [disabled]="addTaskForm.controls.myForm.errors">add entry</button>
 </div>
   </form>

.TS 

 const dialogRef = this.dialog.open(myPopup, {
width: '500px',
data: {
  text: this.text,
  active: this.active,
  date: this.date
}

}); 

dialogRef.afterClosed().subscribe(result => {
    if(result){
      this.addTask.push({displayText: result.text, effectiveDate: result.date,  isActive: result.active})
...