Question

我正在使用Mat-Dialog向我的Angular应用添加表单。一切正常，但我似乎无法从我的复选框中获得正确的值。

FormControl是＆＃39; entryIsKeynote＆＃39;。问题是，在app.component中，我总是得到＆＃34; false＆＃34;对于第三个和最后一个参数; data [＆＃34; entryIsKeynote.checked＆＃34;]和data [＆＃34; entryIsKeynote＆＃34;]始终返回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。

Angular Material对话框：复选框始终返回false

1 个答案: