代码之家  ›  专栏  ›  技术社区  ›  The Fox

“角度材质”对话框:复选框始终返回false

  •  1
  • The Fox  · 技术社区  · 7 年前

    我正在使用 Mat-Dialog 将表单添加到我的Angular应用程序。一切正常,只是我似乎无法从复选框中获得正确的值。

    FormControl为“entryIsKeynote”。问题是,在应用程序中。组件,我总是得到第三个也是最后一个参数的“false”;数据[“entryIsKeynote.checked”]和数据[“entryIsKeynote”]始终返回false。

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

    有谁有这方面的经验可以帮助我吗?

    //添加条目。组成部分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();
      }
    
    }
    

    //添加条目。组成部分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>
    

    //应用程序。组成部分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"]))
        );
      }
    }
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   yurzui    7 年前

    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