Диалоговое окно «Угловой материал»: флажок всегда возвращает false

Question

Я использую Mat-Dialog , чтобы добавить формы в мое приложение Angular. Все работает нормально, за исключением того, что я не могу получить правильное значение из своих флажков.

FormControl - это "entryIsKeynote". Проблема в том, что в app.component я всегда получаю «false» для третьего и последнего параметра; data ["entryIsKeynote.checked"] и data ["entryIsKeynote"] всегда возвращают значение false.

 dialogRef.afterClosed().subscribe(
          data => this.newEntryAdded(new Entry(data["entryTitle"], data["entryContents"], data["entryIsKeynote.checked"]))
        );

Есть ли у кого-нибудь опыт с этим, кто мог бы помочь мне?

// add-entry.component.ts

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef, MatCheckbox } from "@angular/material";
import { MatFormFieldModule } from "@angular/material/form-field";
import { FormControl, FormBuilder, Validators, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-add-entry',
  templateUrl: './add-entry.component.html',
  styleUrls: ['./add-entry.component.css']
})
export class AddEntryComponent implements OnInit {
  form : FormGroup;

  constructor(private fb: FormBuilder,
    private dialogRef: MatDialogRef<AddEntryComponent>,
    @Inject(MAT_DIALOG_DATA) data) {
      this.form = fb.group({
        entryTitle : ["", [Validators.required, Validators.maxLength(35)]],
        entryContents : ["", Validators.required],
        //entryIsKeynote : [false, Validators.required]
      });
  }

  ngOnInit() {
  }

  create() {
    this.dialogRef.close(this.form.value);
  }

  cancel() {
    this.dialogRef.close();
  }

}

// add-entry.component.html

<div class="addEntryDialogWrapper">
<h3 mat-dialog-title>New Scribble</h3>

<mat-dialog-content [formGroup]="form">

  <mat-form-field>
    <input matInput placeholder="Title" formControlName="entryTitle">
    <mat-error>Title required</mat-error>
  </mat-form-field>

  <mat-form-field>
      <textarea matInput placeholder="Scribble at will..." matTextareaAutosize matAutosizeMinRows="3"
                matAutosizeMaxRows="8" formControlName="entryContents"></textarea>
      <mat-error>Contents required</mat-error>
    </mat-form-field>

    <mat-checkbox formFontrolName="entryIsKeynote">Mark as Keynote</mat-checkbox>

</mat-dialog-content>

<div class="createOrCancelWrapper">
  <mat-dialog-actions>
    <div class="ui center aligned buttons">
      <button class="ui button" (click)="cancel()">Cancel</button>
      <div class="or"></div>
      <button class="ui positive button" [disabled]="form.invalid"(click)="create()">Create</button>
    </div>
  </mat-dialog-actions>
</div>
</div>

// app.component.ts

import { Component } from '@angular/core';
import { Entry } from './entry/entry.model';
import { Marker } from './marker/marker.model';
import { EntryDataService } from './entry-data.service';
import { MarkerDataService} from './/marker-data.service';
import { MatDialog, MatDialogConfig} from "@angular/material";
import { AddEntryComponent } from './add-entry/add-entry.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [EntryDataService, MarkerDataService]
})
export class AppComponent {

  constructor(private _entryDataService : EntryDataService,
        private _markerDataService : MarkerDataService,
        private dialog : MatDialog) {
  }

  get entries(): Entry[] {
    return this._entryDataService.entries;
  }

  newEntryAdded(entry) {
    this._entryDataService.addNewEntry(entry);
  }

  addEntryDialog() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.data = { };

    const dialogRef = this.dialog.open(AddEntryComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
      data => this.newEntryAdded(new Entry(data["entryTitle"], data["entryContents"], data["entryIsKeynote.checked"]))
    );
  }
}

Answer 1

1) Почему вы это прокомментировали?

this.form = fb.group({
   entryTitle : ["", [Validators.required, Validators.maxLength(35)]],
   entryContents : ["", Validators.required],
   //entryIsKeynote : [false, Validators.required]
   ^^^^^
});

Пожалуйста, раскомментируйте его.

2) Для получения значения используйте data["entryIsKeynote"] вместо data["entryIsKeynote.checked"]:

dialogRef.afterClosed().subscribe(
  data => this.newEntryAdded(
     new Entry(data["entryTitle"], data["entryContents"], data["entryIsKeynote"]))
);

3) Вы сделали опечатку в add-entry.component.html шаблоне:

<mat-checkbox formFontrolName="entryIsKeynote">Mark as Keynote</mat-checkbox>
              ^^^^^^^^^^^^^^^^^

Это должно быть formControlName.