时间戳

首页 > 解决方案 > 如何在不使用 NgModel 的情况下使用 PrimeNg 将选定的复选框值传递给子组件？角

angular - 如何在不使用 NgModel 的情况下使用 PrimeNg 将选定的复选框值传递给子组件？角

问题描述

我有一个基本应用程序，其中有一个表单，我想将选定的复选框值传递给子组件，以便在p-multiSelect父组件中选择的复选框是子组件中唯一出现的项目p-dropdown。

[(ngModel)]除非我使用来自 API 的数据将值修补到选项中，否则大部分情况下都可以使用p-multiSelect它。此外，这会导致以下错误：

It looks like you're using ngModel on the same form field as formControlName. 
Support for using the ngModel input property and
ngModelChange event with reactive form directives has been deprecated
in Angular v6 and will be removed in Angular v7

For more information on this, see our API docs here: https://angular.io/api/forms/FormControlName#use-with-ngmodel

由于我正在传递一个似乎确实需要来自[(ngModel)]. p-multiSelect有没有不同的方法可以在不使用 ngModel 的情况下将选择项从子组件传递到子组件中？

正如您将能够在代码中看到的那样，这是有效的。该值正在被传递。但是，如果我patchValue()在表单上使用并从其他地方引入此 multiSelect 选项，则它不适用于NgModel. 我也收到上述错误，因为我正在ngModel使用FormControlName

这是一个stackblitz，代码如下。我已经极大地简化了它并从子组件中删除了表单，因此它只是获得了价值。

应用组件.html

<div style="padding: 10px; border: solid black 1px">
    <form [formGroup]="form">
        <span>Parent Component. Multi-select, where selected items are input into child comp dropdown</span>
        <br>
        <p-multiSelect 
      [options]="statementOptions" 
      formControlName="statements" 
      [(ngModel)]="selectedStatements">
        </p-multiSelect>

        <div style="margin-top: 10px; padding: 5px; border: solid black 1px;">
            <span>Child Component, I want to receive selected items ,but am unaway how to without using ngModel</span>
            <app-select-statements [statements]='selectedStatements'>
            </app-select-statements>
        </div>
    </form>
</div>

应用组件.Ts

export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      statements: ''
    })
  }
  statementOptions = [
    { label: 'Item1', value: 'item1' },
    { label: 'item2', value: 'item2' },
    { label: 'Item3', value: 'item3' },
    { label: 'Item4', value: 'item4' },
    { label: 'Item5', value: 'item5' },
  ];
}

选择语句组件

@Component({
  selector: 'app-select-statements',
  template: `
    <div> 
      <p-dropdown 
        placeholder="Choose"
        [options]="statements"
        ></p-dropdown>
    </div>
  `,
})
export class StatementComponent implements OnChanges {
  @Input() statements;

  //this maps the values in order to get back the 
  //label and value as required by the PrimeNg dropdown
  ngOnChanges() {
    if(this.statements) {
      this.statements = this.statements.map((s) => ({
        label: s,
        value: s
      }))
    }
  }
}

标签： angularprimengangular-forms

解决方案

也许只使用表单值？

<app-select-statements [statements]="form.get('statements').value">

推荐阅读