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

【问题标题】：How to pass selected checkbox values into childcomponent with PrimeNg without using NgModel? Angular如何在不使用 NgModel 的情况下使用 PrimeNg 将选定的复选框值传递给子组件？角
【发布时间】：2020-06-18 21:23:18
【问题描述】：

我有一个基本应用程序，其中有一个表单，我想将选定的复选框值传递给子组件，以便在父组件上的 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)] 的选定值。有没有其他方法可以在不使用 ngModel 的情况下将 p-multiSelect 中的选择项传递到子组件中？

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

Here is a stackblitz 和代码如下。我对其进行了极大的简化，并从子组件中删除了表单，因此它只是获得了价值。

AppComponent.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>

AppComponent.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
      }))
    }
  }
}

【问题讨论】：

也许只使用表单值？ <app-select-statements [statements]="form.get('statements').value">
哎呀，不敢相信我什至没有想到这一点。这按预期工作，并且做了我想做的事情。请随意回答问题，以便我接受并为您赢得声誉

标签： angular primeng angular-forms

【解决方案1】：

也许只使用表单值？

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

【讨论】：

【解决方案2】：

您不能混合使用响应式表单和模板驱动表单。您正在使用响应式表单，因此您不应删除 ngModel，而只能使用 formControlName。如果您需要侦听(ngModelChange)，则应改为在构造函数中订阅this.form.valuechanges.subscribe(...) 表单中的值更改

另见https://www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular

【讨论】：