如何使用反应式形式包装像自动完成这样的 Primeng 组件? [英] How to wrap a primeng component like autocomplete using reactive forms?

问题描述

我想在我自己的组件中包装一个primeng自动完成组件，但不知道如何提供一个formControlName:

I want to wrap a primeng autocomplete component in my own component but can't figure out haw to provide a formControlName:

错误:未捕获(承诺):错误:formControlName 必须与父 formGroup 指令一起使用.

包装组件html:

<p-autoComplete
  [formControlName]="formControlName"
  [suggestions]="suggestions"
  [multiple]="multiple"
  [dropdown]="dropdown"
  (completeMethod)="search($event)">
</p-autoComplete>

包装组件 ts:

@Component({
  selector: 'logi-autocomplete',
  templateUrl: 'autocomplete.component.html',
  providers: [AUTOCOMPLETE_VALUE_ACCESSOR]
})
export class AutocompleteComponent implements OnInit, ControlValueAccessor {

  @Input() formControlName: string;

  @Input() multiple = true;
  @Input() dropdown = true;

  // Skipped non related code

  _value: any = '';
  get value(): any { return this._value; };
  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }

  writeValue(value: any) {
    this._value = value;
    this.onChange(value);
  }

  onChange = (_) => {};
  onTouched = () => {};
  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

在自定义组件中使用组件:

Use of the component in a custom for component:

<form [formGroup]="form">
    <logi-autocomplete
      [formControlName]="'groups'"
    ></logi-autocomplete>
</form>

推荐答案

您必须在要嵌入自动完成功能的 HTML 中编写代码.

You have to write code in the HTML where you want to embed autocomplete.

`

<span class="ui-fluid">
<p-autoComplete formControlName="autoComplete"field="label"completeMethod)="search($event)">
</p-autoComplete>
</span>
 <ul>
     <li *ngFor="let s of autoComplete">{{s.label}}
    </li>
 </ul>

`

并在您的组件中编写代码，您将在其中将数据传递给自动完成小部件.

and write code in your component where you will pass the data to autocomplete widget.

autoComplete       = new FormControl(null, []);search(event){this.receiptDiarizationFacade.getSubjects(event.query).subscribe(value=>this.autoComplete=value);
}

在此代码快照中，我使用了 observable 而不是 promise，但您可以使用 promise

In this code snapshot, I used observable instead of promise but you can use promise

这篇关于如何使用反应式形式包装像自动完成这样的 Primeng 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！