Question

我正在使用角度10和角度材质进行项目示例应用程序。在这种情况下，我正在使用“反应性角形”，其中包含各种输入，例如文本框，选择下拉，切换，材料碎片，文本区域和保存按钮。我需要做的是，当我单击“保存”按钮时，它将在控制台中显示表单的所有值。

问题：问题是，当我单击“保存”按钮时，它会显示除选定的下拉元素和选定的筹码元素之外的所有表单值。

下面是供参考的代码文件

example.component.html

选择下拉列表的代码

                  <div class = "col-md-6 kt-margin-bottom-20-mobile">
                    <input matInput type = "text" formControlName = '_categoryList' name = 'food'/>
                    <mat-select placeholder = "--Select Category--" [(ngModel)]="selectedValue" name="categoryItem" [ngModelOptions]="{standalone: true}">
                      <mat-option *ngFor = "let categoryItem of categoryArray">{{ categoryItem }}</mat-option>
                    </mat-select>
                  </div>
                </div>
              </mat-card>
            </div>

材料芯片代码

                  <div class = "col-md-6 kt-margin-bottom-10-mobile">
                    <mat-form-field class = "example-chip-list">
                      <mat-chip-list #chipList aria-label = "Fruit selection" formControlName = "_chipsList">
                        <mat-chip
                          *ngFor = "let fruit of fruits"
                          [selectable] = "selectable"
                          [removable] = "removable"
                          (removed) = "remove(fruit)">
                          {{fruit}}
                          <mat-icon matChipRemove *ngIf = "removable">cancel</mat-icon>
                        </mat-chip>
                        <input
                          placeholder = "New fruit..."
                          #fruitInput
                          [formControl] = "fruitCtrl"
                          [matAutocomplete] = "auto"
                          [matChipInputFor] = "chipList"
                          [matChipInputSeparatorKeyCodes] = "separatorKeysCodes"
                          (matChipInputTokenEnd) = "add($event)">
                      </mat-chip-list>
                      <mat-autocomplete #auto = "matAutocomplete" (optionSelected) = "selected($event)">
                        <mat-option *ngFor = "let fruit of filteredFruits | async" [value] = "fruit">
                          {{fruit}}
                        </mat-option>
                      </mat-autocomplete>
                    </mat-form-field>
                  </div>
                </div>
              </mat-card>
            </div>

example.component.ts

  selectedValue: string;
  catalogueForm: FormGroup;
  public catalogueArray = [];
  public categoryArray = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'];

  visible = true;
  selectable = true;
  removable = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Item1'];
  allFruits: string[] = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'];

  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
  @ViewChild('auto') matAutocomplete: MatAutocomplete;

  constructor(private addCatalogueService: AddCatalogueService) {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
      startWith(null),
      map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push(value.trim());
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }

    this.fruitCtrl.setValue(null);
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }


// ------------------SAVE BUTTON CLICK FUNCTION -> submit()-----------------------
  submit() {
    console.log('Hello');
    console.log(this.fruits);
    console.log(this.catalogueForm.value);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }

有什么解决方案吗？

反应形式不选择选择下拉列表和物料芯片的值

0 个答案: