У меня есть приложение basi c, в котором у меня есть форма, и я хочу передать выбранные значения флажков дочернему компоненту, чтобы флажки, выбранные в p-multiSelect на родительском элементе, были единственными элементы, которые появляются в p-dropdown в дочернем элементе.
Используя [(ngModel)], это работает по большей части, за исключением случаев, когда я вставляю значения в параметры p-multiSelect с данными из API. Кроме того, это приводит к следующей ошибке:
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 и код ниже. Я значительно упростил его и удалил форму из дочернего компонента, так что он просто получает значение.
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' },
];
}
Компонент SelectStatement
@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
}))
}
}
}