在Angular4中使用动态创建的反应形式中的自定义组件

Question

我有一个组件，我使用Formbuilder动态构建控件

Nominatecomponent.ts

@Component({
selector: 'nominate',  
templateUrl: './nominate.html',
})
export class NominateComponent{  
  myForm: FormGroup;  
  constructor(
     private fb: FormBuilder
   ) {}

 ngOnInit() {
  // build the form model
  this.myForm = this.fb.group({
   items: this.fb.array([])
  })
}

 submit() {
  console.log("Reactive Form submitted: ", this.myForm)
}

 buildItem(val: string) {
  return new FormGroup({
  name: new FormControl(val, Validators.required),      
  quantity: new FormControl(val, Validators.required)
 })
}

addRow(): void{
const control = <FormArray>this.myForm.controls['items'];
control.push(this.buildItem(''));
}
}

Nominate.html

<form [formGroup]="myForm" (ngSubmit)="submit()">   
    <fieldset formArrayName="items">                    
      <div class="form-group row"
           *ngFor="let item of myForm.get('items').controls; let i=index"
           [formGroup]="item">
        <div class="col-sm-6">                            
           <lookup [attr.id]="'dog'+i" formControlName ="dog"></lookup>            
        </div>
      </div>
    </fieldset>               
    <hr>
    <div class="form-group">
      <input type="submit" class="form-control" value="Submit" [disabled]="myForm?.invalid">
    </div>
  </form>
  <h6 class="mt-3">FormGroup Model (<code>myForm.value</code>)</h6>
  <div><pre><code>{{ myForm?.value | json }}</code></pre></div>

在这里，我想添加一个自定义组件＆＃39; lookup＆＃39;而不是输入文本。

<lookup></lookup>

但我不确定如何将其添加为表单组的一部分。我尝试了几个在线链接，但都是徒劳的。

查找组件

@Component({
      selector : 'lookup',
      templateUrl : './lookup.html',
      providers : [LookupService]})
export class DogLookupComponent{
      results: Object;
      searchTerm$ = new Subject<string>();
      @Input() group: FormGroup;

      constructor(private LookUpService: LookupService){
                this.LookUpService.searchDogs(this.searchTerm$)
                .subscribe(results => {
                          this.results = results;
                });
      }

}

lookup.html

<input (keyup)="searchTerm$.next($event.target.value)" placeholder="Search..." type="text" class="input-group-sm col-sm-12"  [(ngModel)]= "selectedText">
<div *ngIf="results" class="col-sm-12" style="min-height:200px; overflow-y: auto;">                 
      <div *ngFor="let result of results | slice:0:5" class="row clickbox" (click)="selectItem(result.Id)">                                                  
                <mat-list style="width:100%">
                          <mat-list-item>
                                    <td class="col-sm-5"> {{ result.Name }}  </td>
                                    <td class="col-sm-3"> {{ result.quantity }} </td>                                        
                          </mat-list-item>
                          <mat-divider></mat-divider>
                </mat-list>
      </div>

我尝试创建输入并将其作为组传递。尝试了几件事。我是Angular的新手，并尝试探索Angular中的功能。