Question

我正在使用角度形式来创建动态形式。在这里，我的问题是我一直在使用自动完成自定义标记的自动完成搜索字段，并且工作正常。因此，两者是不同的组件。用户在自动完成搜索框中选择该选项后，我需要在动态表单组件中执行功能。我该怎么办？希望您能解决我的问题。

我的代码是：

 export class DynamicFormComponent implements OnInit {
    constructor(private auth: AuthService, private _http: HttpClient, private data: DataShareService, private toastr: ToastrService, private globals:GlobalConstants) {
    }

}




 @Component({
  selector: 'app-form-autocomplete-type',
  template: `
   <!-- <input matInput 
      [matAutocomplete]="auto"
      [formControl]="formControl" 
      [formlyAttributes]="field">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let value of filter | async" [value]="value">
        {{ value }}
      </mat-option>
    </mat-autocomplete>-->

    <input matInput
    [matAutocomplete]="auto"
    [formControl]="formControl"
    [formlyAttributes]="field"
    [placeholder]="to.placeholder">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
    <mat-option
      *ngFor="let value of filter | async"
      [value]="value" (onSelectionChange)=updateValues(value)>
      {{ value.userGroupName }}
    </mat-option>
  </mat-autocomplete>
  `,

})
export class AutocompleteTypeComponent extends FieldType  {
  // Optional: only if you want to rely on `MatInput` implementation
  @ViewChild(MatInput) formFieldControl: MatInput;

  filter: Observable<any[]>;


  ngOnInit() {

    this.filter = this.formControl.valueChanges
      .pipe(
        startWith(''),
        switchMap(term => this.to.filter(term)),
      );
  }

  updateValues(val:any){
    //Call service to fetch the details and update other formly fields values
    //update the rank and address formly fields based on the results we fetch from service.It may be single field or a group of fields.
    console.log("Call service to fetch the details and update other formly fields values");
    //this.dynamicFormComponent.getSelectedName(val);

  }
}

如何在另一个组件中执行组件功能？

0 个答案: