如何使用formbuilder.group创建的表单中的芯片列表获取多个值作为输入?

时间:2018-09-18 12:02:07

标签: angular6 formgroups

我正在用筹码创建表格。因此,我必须在表单的输入字段中将所有选定的芯片作为数组获取。但是,我只得到最后一个值作为输入。我是stackoverflow的新手。请忽略任何错误。

  

Blockquote .html文件

<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
    <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
        <span class="title dialog-title">{{dialogTitle}}</span>
        <button mat-icon-button (click)="_matDialogRef.close()" aria-label="Close dialog">
            <mat-icon>close</mat-icon>
        </button>
    </mat-toolbar-row>

                         {{chapter.name}} {{chapter.lastName}}

        ->     

<div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>

    <form [formGroup]="courseForm">
        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
            <mat-form-field fxFlex>
                <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
                <input name="name" formControlName="name" placeholder=" Course Name" matInput required>
            </mat-form-field>
  </div>
  <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
            <mat-form-field fxFlex>
                <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
                <input name="subject" formControlName="subject" placeholder=" Subject Name" matInput required>
            </mat-form-field>
  </div>
  <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
            <mat-form-field fxFlex>
                <mat-icon matPrefix class="mr-12 s-20 secondary-text">account_circle</mat-icon>
                <input name="description" formControlName="description" placeholder=" Description" matInput required>
            </mat-form-field>
        </div>

    <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
        <mat-form-field class="example-chip-list">
            <mat-chip-list #chipList>
              <mat-chip
                *ngFor="let teacher of teachers"
                [selectable]="selectable"
                [removable]="removable"
                (removed)="removeteacher(teacher)">
                {{teacher}}
                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
              </mat-chip>
                <input
                placeholder="New Teacher..."
                #teacherInput           
                formControlName = "teacher"
                [matAutocomplete]="auto"
                [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)">
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
              <mat-option *ngFor="let teacher of filteredTeachers | async" [value]="teacher">
                {{teacher}}
              </mat-option>
            </mat-autocomplete>
            </mat-form-field>       
            <!-- <pre>{{teachers|json}}</pre> -->
    </div>  
    </form>
</div>

<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">

    <button *ngIf="action !=='edit'" mat-raised-button (click)="_matDialogRef.close(courseForm)" class="save-button mat-accent"
        [disabled]="courseForm.invalid" aria-label="SAVE">
        SAVE
    </button>

    <button *ngIf="action ==='edit'" mat-raised-button (click)="_matDialogRef.close(courseForm)" class="save-button mat-accent"
        [disabled]="courseForm.invalid" aria-label="SAVE">
        SAVE
    </button>

    <!-- <button *ngIf="action ==='edit'" mat-icon-button (click)="_matDialogRef.close(['delete',chapterForm])" aria-label="Delete"
        matTooltip="Delete">
        <mat-icon>delete</mat-icon>
    </button> -->

</div>

`

  

Blockquote .component文件

createCourseForm(): FormGroup {
        return this._formBuilder.group({
            name: ['', Validators.required],
            subject: [''],
            description: [''],
            teacher: [''],
            // students: [this.course.students],
        });

0 个答案:

没有答案
相关问题
最新问题