Как сделать так, чтобы слова в Types выглядели как фишки? - PullRequest
Новая
       18

Как сделать так, чтобы слова в Types выглядели как фишки?

1 голос
/ 07 мая 2019

Поэтому, когда я нахожусь на предыдущей странице, где вам нужно вводить типы, это выглядит как фишки, но когда я перехожу на следующую страницу, которая является формой заказа на групповую доставку, «типы» появляются как обычные слова.я хочу, чтобы они тоже были чипами, но я не знаю как?

HTML 

<div fxLayout="column" fxFlex="30" class="mr-8">
  <div *ngIf="mode !== 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
    <mat-form-field appearance="outline" fxFlex>
      <mat-label>Types</mat-label>
      <input name="type" formControlName="type" placeholder="Types" matInput>
    </mat-form-field>
  </div>
  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
    <mat-form-field appearance="outline" fxFlex>
      <mat-chip-list #chipList>
          <mat-chip *ngFor="let type of types"
              [selectable]="selectable"
              [removable]="removable"
              (removed)="remove(type)">
              {{type}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input name="type" [matChipInputFor]="chipList" placeholder="Types"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)" matInput>
      </mat-chip-list>
    </mat-form-field>
  </div>

TS 

import { DeliveryOrder } from './../delivery-order';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Component, OnInit, Inject, ViewEncapsulation, HostListener } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef, MatChipInputEvent } from '@angular/material';
import { DeliveryOrdersService } from '../delivery-orders.service';
import * as _ from 'lodash';
import { ProfileService } from 'app/services/profile/profile.service';
import {COMMA, ENTER} from '@angular/cdk/keycodes';

@Component({
  selector: 'app-delivery-order-edit',
  templateUrl: './delivery-order-edit.component.html',
  styleUrls: ['./delivery-order-edit.component.scss'],
  encapsulation: ViewEncapsulation.None


})
export class DeliveryOrderEditComponent implements OnInit {

  editDeliveryOrderForm: FormGroup;
  deliveryOrder: DeliveryOrder;
  mode: string;
  selectable = true;
  removable = true;
  addOnBlur = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  types: string[];

  constructor(public matDialogRef: MatDialogRef<DeliveryOrderEditComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any,
              private formBuilder: FormBuilder,
              public profile: ProfileService,
              private deliveryOrderService: DeliveryOrdersService) { }


              add(event: MatChipInputEvent): void {
                const input = event.input;
                const value = event.value;
                console.log(`mat chip`, event);
                console.log(`mat chip value`, value);

                // Add our fruit
                if ((value || '').trim()) {

                  this.types.push(value.trim());
                  console.log(`types`, this.types);
                  // let type = this.editDeliveryOrderForm.value.type;
                  // type += ',' + value.trim();
                  this.editDeliveryOrderForm.patchValue({
                    type: this.types.join(',')
                  });
                  this.editDeliveryOrderForm.markAsDirty();
                }

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

              remove(type: string): void {
                const index = this.types.indexOf(type);

                if (index >= 0) {
                  this.types.splice(index, 1);
                  this.editDeliveryOrderForm.patchValue({
                    type: this.types.join(',')
                  });
                  this.editDeliveryOrderForm.markAsDirty();
                }


             }

  ngOnInit(): void {
    console.log(`DeliveryOrderEditComponent`, this.data);
    this.deliveryOrder = this.data.order;
    this.mode = this.data.mode;
    if (this.mode === 'edit') {
      this.editDeliveryOrderForm = this.initEditForm();
    } else {
      this.editDeliveryOrderForm = this.initGroupForm();
    }

  }

  initEditForm(): FormGroup {
    const _types = this.deliveryOrder.type.split(',');
    this.types = _types.filter(t => t !== '');
    return this.formBuilder.group(
      {
        address: new FormControl({ value: this.deliveryOrder.address, disabled: true }, [Validators.required]),
        locationName: new FormControl({ value: this.deliveryOrder.locationName, disabled: true }, [Validators.required]),
        remarks: new FormControl(this.deliveryOrder.remarks),
        referenceNo: new FormControl(this.deliveryOrder.referenceNo, [Validators.required]),
        type: new FormControl(this.deliveryOrder.type),
        duration: new FormControl(this.deliveryOrder.duration),
        itemUnits: new FormControl(this.deliveryOrder.itemUnits, [Validators.required]),
        totalVolume: new FormControl(this.deliveryOrder.totalVolume, [Validators.required]),
        totalWeight: new FormControl(this.deliveryOrder.totalWeight, [Validators.required]),
        itemLength: new FormControl(this.deliveryOrder.itemLength, [Validators.required]),
        itemWidth: new FormControl(this.deliveryOrder.itemWidth, [Validators.required]),
        itemHeight: new FormControl(this.deliveryOrder.itemHeight, [Validators.required]),
        itemWeight: new FormControl( { value: this.deliveryOrder.itemWeight, disabled: true }, [Validators.required]),
      }
    );
  }

  initGroupForm(): FormGroup {
    return this.formBuilder.group(
      {
        address: new FormControl(this.deliveryOrder.address, [Validators.required]),
        locationName: new FormControl(this.deliveryOrder.locationName, [Validators.required]),
        remarks: new FormControl(this.deliveryOrder.remarks),
        referenceNo: new FormControl({ value: this.deliveryOrder.referenceNo, disabled: true }, [Validators.required]),
        type: new FormControl({ value: this.deliveryOrder.type, disabled: true }),
        duration: new FormControl({ value: this.deliveryOrder.duration, disabled: true }),
        itemUnits: new FormControl({ value: this.deliveryOrder.itemUnits, disabled: true }, [Validators.required]),
        totalVolume: new FormControl({ value: this.deliveryOrder.totalVolume, disabled: true }, [Validators.required]),
        totalWeight: new FormControl({ value: this.deliveryOrder.totalWeight, disabled: true }, [Validators.required]),
        itemLength: new FormControl({ value: this.deliveryOrder.itemLength, disabled: true }, [Validators.required]),
        itemWidth: new FormControl({ value: this.deliveryOrder.itemWidth, disabled: true }, [Validators.required]),
        itemHeight: new FormControl({ value: this.deliveryOrder.itemHeight, disabled: true }, [Validators.required]),
        itemWeight: new FormControl({ value: this.deliveryOrder.itemWeight, disabled: true }, [Validators.required]),
      }
    );
  }

Итак, enter image description here слова в типах из этой формы должны выглядеть как фишки, а не как обычные слова с запятыми, как мне это сделать, пожалуйста, кто-нибудь?

1 Ответ

0 голосов
/ 07 мая 2019

Ваш массив типов пуст, либо поместите их в свой массив типов, либо добавьте в ngOnInit () this.types = this.deliveryOrder.type

...