2021-02-22 ng-select ngModel 绑定Object 在数组中的应用

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-select-label-in-value',
  template: `
    <p>The selected option's age is {{ selectedValue?.age }}</p>
    <br />
    <nz-select [(ngModel)]="selectedValue" [compareWith]="compareFn" (ngModelChange)="log($event)" nzAllowClear nzPlaceHolder="Choose">
       <nz-option  [nzValue]="0" nzLabel="option.label"></nz-option>
      <nz-option *ngFor="let option of optionList" [nzValue]="option" [nzLabel]="option.label"></nz-option>
    </nz-select>
  `,
  styles: [
    `
      nz-select {
        width: 120px;
      }
    `
  ]
})
export class NzDemoSelectLabelInValueComponent {
  optionList = [
    { label: 'Lucy', value: 'lucy', age: 20 },
    { label: 'Jack', value: 'jack', age: 22 }
  ];
  selectedValue = { label: 'Jack', value: 'jack', age: 22 };
  // tslint:disable-next-line:no-any
  compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.value === o2.value : o1 === o2);

  log(value: { label: string; value: string; age: number }): void {
    console.log(value);
  }
}

https://ng.ant.design/version/9.3.x/components/select/zh#api

 

    <form nz-form [formGroup]="validateForm">
        <ng-container formArrayName="packages" *ngFor="let item of packagesControls.controls; let packageIndex = index;">
          <!-- <object data={{item}}></object> -->
          <div [formGroupName]="packageIndex" nz-row [nzGutter]="16" nzAlign="middle" class="package-item">
            <div nz-col [nzSpan]="23">
              <div nz-row [nzGutter]="16">
                <div nz-col [nzSpan]="4">
                  <nz-form-item>
                    <nz-form-label *ngIf="packageIndex === 0" [nzNoColon]="true" >Consignment</nz-form-label>
                    <nz-form-control nz-col [nzSpan]="24">
                      <nz-select nzSize="large"
                       formControlName="packObj" 
                       (ngModelChange)="editSetupPackage($event,packageIndex)" 
                       [(ngModel)]="item.value.packObj"   //在多数组中的应用********                              
                       [compareWith]="compareFn"
                       *ngIf="subscribePackage">
                        <nz-option [nzValue]="0" nzLabel="Customize"></nz-option>
                        <nz-option *ngFor="let option of packagesTemplate" 
                                   [nzValue]="option"
                                   [nzLabel]="option.name"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>

                <div nz-col [nzSpan]="3">
                  <nz-form-item nz-col  [nzSpan]="24">
                    <nz-form-label *ngIf="packageIndex === 0" nzRequired [nzNoColon]="true" >Qty</nz-form-label>
                    <nz-form-control nzErrorTip="Please input Item Qty!">
                      <input nz-input nzSize="large" formControlName="qty" name="qty" placeholder="Qty">
                    </nz-form-control>
                  </nz-form-item>
                </div>

                <div nz-col [nzSpan]="3">
                  <nz-form-item nz-col [nzSpan]="24">
                    <nz-form-label *ngIf="packageIndex === 0" nzRequired [nzNoColon]="true">Weight(kg)</nz-form-label>
                    <nz-form-control nzErrorTip="Please input Item Weight!">
                      <input nz-input nzSize="large" formControlName="weight" name="weight" placeholder="Weight(kg)">
                    </nz-form-control>
                  </nz-form-item>
                </div>

                <div nz-col [nzSpan]="3">
                  <nz-form-item nz-col [nzSpan]="24">
                    <nz-form-label *ngIf="packageIndex === 0" nzRequired [nzNoColon]="true">L(cm)</nz-form-label>
                    <nz-form-control nzErrorTip="Please input Item Length!">
                      <input nz-input nzSize="large" formControlName="length" name="length" placeholder="L(cm)">
                    </nz-form-control>
                  </nz-form-item>
                </div>

                <div nz-col [nzSpan]="3">
                  <nz-form-item nz-col [nzSpan]="24">
                    <nz-form-label *ngIf="packageIndex === 0" nzRequired >W(cm)</nz-form-label>
                    <nz-form-control nzErrorTip="Please input Item Width!">
                      <input nz-input nzSize="large" formControlName="width" name="width" placeholder="W(cm)">
                    </nz-form-control>
                  </nz-form-item>
                </div>

                <div nz-col [nzSpan]="3">
                  <nz-form-item nz-col [nzSpan]="24">
                    <nz-form-label *ngIf="packageIndex === 0" nzRequired [nzNoColon]="true">H(cm)</nz-form-label>
                    <nz-form-control nzErrorTip="Please input Item Height!">
                      <input nz-input nzSize="large" formControlName="height" name="height" placeholder="H(cm)">
                    </nz-form-control>
                  </nz-form-item>
                </div>

                <div nz-col [nzSpan]="5">
                  <nz-form-item nz-col [nzSpan]="24">
                    <nz-form-label *ngIf="packageIndex === 0"  [nzNoColon]="true">Reference</nz-form-label>
                    <nz-form-control nzErrorTip="Please input Item Reference!">
                      <input nz-input nzSize="large" formControlName="reference" name="Reference" placeholder="Reference">
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </div>
            </div>
            <div nz-col [nzSpan]="1"
                 [ngClass]="{'first-package-delete-icon': packageIndex === 0, 'package-delete-icon': true}"
                 *ngIf="packagesControls.controls.length !== 1">
              <i (click)="deletePackage(packageIndex)" nz-icon nzType="delete"
                 nzTheme="outline"></i>
            </div>
          </div>
        </ng-container>

        <div nz-row>
          <div nz-col nzSpan="22">
            <button nz-button style="margin-right: 10px" nzSize="small" nzType="primary" (click)="addPackage()">Add Package</button>
          </div>

          <div nz-col nzSpan="2" nzJustify="end">
            <button nz-button style="margin-right: 10px" nzSize="small"
                    [nzType]="validateForm.valid? 'primary' : 'default'"
                    [disabled]="!validateForm.valid"
                    [nzLoading]="isLoadingSave"
                    (click)="checkAddressValidAndSave($event)">
             Save
            </button>
          </div>
        </div>
      </form>

import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { UtilService } from 'src/app/services/util.service';
import { OrderService} from '../../../../service/order.service';
@Component({
  selector: 'app-package-info',
  templateUrl: './package-info.component.html',
  styleUrls: ['./package-info.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class PackageInfoComponent implements OnInit {
  @Input() consignments;
  @Input() packagesTemplate;
  @Input() id;
  @Input() showPackageError;
  @Output() packageNumChange = new EventEmitter();

  validateForm: FormGroup;
  showPackageInfo: boolean = false;
  showExtraTemp: boolean = true;
  editPackageForm: boolean = false;
  packages: FormArray;
  subscribePackage: boolean = true;
  isLoadingSave: boolean = false;
  selectedOptionValue : any;
  compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.id === o2.id : o1 === o2);
  constructor(
    private fb: FormBuilder,
    private utilService: UtilService,
    private orderService: OrderService,
    private modal: NzModalService
  ) {
    this.showPackageInfo = true;
    this.editPackageForm = true;
  }

  ngOnInit(): void {
    this.validateForm = this.fb.group({
      packages: this.fb.array([this.createShipment()]),
    });
    this.initPackage();
    this.validateForm.statusChanges.subscribe(status => {
      // console.log(status, 'status-------');
      if (status === 'VALID') {
        // this.showPackageInfo = true;
      } else if (status === 'INVALID') {
        this.showPackageInfo = false;
        this.editPackageForm = false;
      }
    });
    if(this.showPackageError){
      this.editShipFromInfo();
    }

  }
  initPackage() {
    if (this.consignments && this.consignments.length) {
      console.log(this.consignments, 'this.consignments');
      
      this.deletePackage(0);
      const control = (<FormArray>(<FormGroup>this.validateForm).controls['packages']);
      for (let i = 0; i < this.consignments.length; i++) {
        this.packages = this.validateForm.get('packages') as FormArray;
        this.packages.push(this.createShipment());
        if(this.consignments[i].packObj !== 0){
          (<FormGroup>control.controls[i]).controls['packObj'].setValue(this.consignments[i].packObj);
          console.log(this.consignments[i].packObj, 'this.consignments[i].packObj');
        }else{
          (<FormGroup>control.controls[i]).controls['packObj'].setValue(0);
        }
        // (<FormGroup>control.controls[i]).controls['packObj'].setValue(0);
        (<FormGroup>control.controls[i]).controls['qty'].setValue(this.consignments[i].qty);
        (<FormGroup>control.controls[i]).controls['weight'].setValue(this.consignments[i].weight);
        (<FormGroup>control.controls[i]).controls['length'].setValue(this.consignments[i].length);
        (<FormGroup>control.controls[i]).controls['width'].setValue(this.consignments[i].width);
        (<FormGroup>control.controls[i]).controls['height'].setValue(this.consignments[i].height);
        (<FormGroup>control.controls[i]).controls['package_id'].setValue(this.consignments[i].package_id);
        (<FormGroup>control.controls[i]).controls['reference'].setValue(null);

        (<FormGroup>control.controls[i]).controls['qty'].markAsTouched();
        (<FormGroup>control.controls[i]).controls['weight'].markAsTouched();
        (<FormGroup>control.controls[i]).controls['length'].markAsTouched();
        (<FormGroup>control.controls[i]).controls['width'].markAsTouched();
        (<FormGroup>control.controls[i]).controls['height'].markAsTouched();
        (<FormGroup>control.controls[i]).controls['reference'].markAsTouched();
      }
      
    }

  }

  editSetupPackage(event, packageIndex): void {
    const control = (<FormArray>(<FormGroup>this.validateForm).controls['packages']);
    const packSettingsObj = this.validateForm['controls'].packages['controls'][packageIndex]['controls'].packObj.value;
    console.log(packSettingsObj,'packSettingsObj');
    console.log(event);
    
    
    const fieldArray = ['weight', 'length', 'width', 'height'];
    if (packSettingsObj && packSettingsObj !== 0) {
      for (const element of fieldArray) {
        (<FormGroup>control.controls[packageIndex]).controls[element].setValue(packSettingsObj[element]);
        (<FormGroup>control.controls[packageIndex]).controls[element].disable();
      }
      (<FormGroup>control.controls[packageIndex]).controls['package_id'].setValue(packSettingsObj.id);
      (<FormGroup>control.controls[packageIndex]).controls['qty'].setValue(1);
    } else {
      for (const item of fieldArray) {
        (<FormGroup>control.controls[packageIndex]).controls[item].enable();
      }
      (<FormGroup>control.controls[packageIndex]).controls['package_id'].setValue(null);
    }
  }

  createShipment( packObj = null, qty= 1, weight= null, height= null, length= null, width= null, reference= null) {
    const regNum = '^([1-9][0-9]*(\\.[0-9]+)?|0+\\.[0-9]*[1-9][0-9]*)$';
    const regQtyNum = '^\\+?[1-9][0-9]*$';
    // const packObjControl = new FormControl(packObj, []);
    // packObjControl.markAsTouched();
    const qtyControl = new FormControl(qty, [Validators.required, Validators.pattern(regQtyNum)]);
    qtyControl.markAsTouched();
    const weightControl = new FormControl(weight, [Validators.required, Validators.pattern(regNum)]);
    weightControl.markAsTouched();
    const lengthControl = new FormControl(length, [Validators.required, Validators.pattern(regQtyNum)]);
    lengthControl.markAsTouched();
    const widthControl = new FormControl(width, [Validators.required, Validators.pattern(regQtyNum)]);
    widthControl.markAsTouched();
    const heightControl = new FormControl(height, [Validators.required, Validators.pattern(regQtyNum)]);
    heightControl.markAsTouched();
    const referenceControl = new FormControl(reference, []);
    referenceControl.markAsTouched();

    return this.fb.group({
      packObj: [0],    
      qty: qtyControl,
      weight: weightControl,
      length: lengthControl,
      width: widthControl,
      height: heightControl,
      reference: referenceControl,
      package_id: [],
    });
  }
  get packagesControls() {
    return this.validateForm.get('packages') as FormArray;
  }

  addPackage(): void {
    this.packages = this.validateForm.get('packages') as FormArray;
    console.log( this.packages, ' this.packages');
    
    this.packages.push(this.createShipment());
  }


  deletePackage(packageIndex: number): void {
    this.packages = this.validateForm.get('packages') as FormArray;
    this.packages.removeAt(packageIndex);
  }
  getControls(frmGrp: FormGroup, key: string) {
    if (<FormArray>frmGrp.controls[key]) {
      return (<FormArray>frmGrp.controls[key]).controls;
    } else {
      return false;
    }
  }
  editShipFromInfo() {
    this.editPackageForm =  !this.editPackageForm;
    this.showPackageInfo  =  !this.showPackageInfo;
  }
  checkAddressValidAndSave(event) {
    event.stopPropagation();
    this.isLoadingSave = true;
    const packageForm = this.validateForm;
    const consignments = packageForm.getRawValue();
    this.consignments =  consignments.packages;
    console.log( this.packages, packageForm, ' this.packages');

    const id = this.id;
    const params = {'package_info': this.consignments };
    this.orderService.updateFulfillment(id, params).subscribe(
      (res) => {
        if (res.status === 200) {
          this.isLoadingSave = false;
          const num = 0;
          this.packageNumChange.emit(this.consignments.reduce((num, obj) => {
            return +obj.qty + num;
          }, 0));
          if (this.validateForm.status === 'VALID') {
            this.showPackageInfo  =  true;
            this.editPackageForm = true;
          }
        }
      },
    );
  }
}