如何在不使用 NgModel 的情况下使用 PrimeNg 将选定的复选框值传递到子组件中？ Angular

Question

我有一个基本的应用程序，其中有一个表单，我想将 selected 的复选框值传递给子组件，以便 selected 的复选框父项中的 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

由于我传递了一个 selected 值，我一直没能想出一个好的方法让它工作，这个值似乎确实需要来自 [(ngModel)] .有没有其他方法可以在不使用 ngModel 的情况下将 p-multiSelect 中的 select 项传递到子组件中？

正如您将能够在代码中看到的那样，这是有效的。该值正在传递。但是，如果我在表单上使用 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
      }))
    }
  }
}

Answer 1

您不能混合使用响应式表单和模板驱动的表单。您使用的是响应式表单，因此您不应删除 ngModel 而只使用 formControlName。如果您需要监听 (ngModelChange)，您应该在构造函数中使用 this.form.valuechanges.subscribe(...)

订阅表单中的值更改

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

Answer 2

也许只使用表单值？

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

如何在不使用 NgModel 的情况下使用 PrimeNg 将选定的复选框值传递到子组件中？ Angular

How to pass selected checkbox values into childcomponent with PrimeNg without using NgModel? Angular

primeng

angular

angular-forms

AppComponent.html

AppComponent.Ts

选择语句组件