使用Angular 7以反应形式使用自定义选择组件

Question

单击Submit按钮后我没有获得价值。以下是到目前为止我尝试过的。

自定义组件HTML-

<div class="form-group custom-input-overlap">
  <select class="form-control custom-select" (change)="change($event)" [ngClass]="{'filledTxt': selectedItem.length > 0}">
    <option value="" selected disabled>{{labelStr}}</option>
    <option *ngFor="let item of titleData" [value]="item.lovId.lovId" [selected]="item.lovId.lovId == selectedItem" >{{ item.lovValue }}</option>
  </select>
  <label for="labelStr" style="left:25px;">{{labelStr}}</label>
</div>

自定义组件TS文件

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-select',
  templateUrl: './custom-select.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomSelectComponent),
      multi: true
    }
  ]
})
export class CustomSelectComponent implements ControlValueAccessor {

  selectedItems = [];
  @Input() labelStr:string;
  @Input() groupID:string;
  @Input() selectedItem:string;

  private propagateOnChange = (value: {lovId, lovValue}[]) => {};
  private propagateTouched = (value: {lovId, lovValue}[]) => {};


  titleData = [
      {
          "lovId":{"lang":"EN","lovId":"1"},
          "lovValue":"Mr"
      },
      { 
          "lovId":{"lang":"EN","lovId":"2"},
          "lovValue":"Mrs"
      },
      {
          "lovId":{"lang":"EN","lovId":"3"},
          "lovValue":"Dr"
      },
      {
          "lovId":{"lang":"EN","lovId":"5"},
          "lovValue":"Miss"
      }
  ]

  constructor(
    private cdRef: ChangeDetectorRef
  ) { 
      console.log("seletced Item = "+this.selectedItem+" groupID = "+this.groupID)
  }

  writeValue(items: {lovId, lovValue}[]) {
    this.selectedItems = items;
  }

  registerOnChange(fn) {
    this.propagateOnChange = fn;
  }

  registerOnTouched(fn) {
    this.propagateTouched = fn;
  }

  change(e) {
    this.selectedItem = e.target.options[e.target.options.selectedIndex].value;
    console.log("selected Item = "+this.selectedItem)
  }
}

用于反应形式的组分

<form [formGroup]="ccnForm" (ngSubmit)="onSubmit()">
        <div class="row">
            <div class="col-md-5 offset-md-1">
                <app-custom-select formControlName="projectType" labelStr="Project type" groupID="CM_GENDER" selectedItem="3" ></app-custom-select>
            </div>

        </div>
    </form>

有效表格TS文件

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, AbstractControl, Validators } from '@angular/forms';

@Component({   selector: 'app-ccn-request',   templateUrl: './ccn-request.component.html',   styleUrls: ['./ccn-request.component.css'] }) export class CcnRequestComponent {

     ccnForm: FormGroup;

  constructor(
    private fb: FormBuilder   ) {
    this.ccnForm = this.fb.group({
      projectType: ['', (c: AbstractControl) => {
        return c.value && c.value.length && c.value.length > 1 ? null : { test: true }
      }]
    });

    this.ccnForm.valueChanges.subscribe(console.log);   }

  get ccnFormControl(){ return this.ccnForm.controls; }

  onSubmit(){
      console.log("Project Name = "+this.ccnFormControl.projectType.value)   }
   }

如何在Submit的Angular Reactive Form按钮上获得自定义组件值的值？

Answer 1

在您的子组件中