Below are the issues identified in your code:
- app.component.hmtl: It is unnecessary to use [(ngModel)] alongside formControlName. Both serve the same purpose, so choose one depending on your requirements. If your component is part of a reactive form, it is recommended to use formControlName and bind it to a FormControl within the FormGroup defined in your .ts file.
- app.component.ts: Remember to create a FormControl with the same name as specified in the .html file within your FormGroup to establish the binding properly. Access the control's value through the FormGroup.
app.component.html:
<form
[formGroup]="aForm"
(ngSubmit)="onSubmit()">
<label>Comma Separator</label>
<p-chips
formControlName="valuesArray"
separator=","></p-chips>
<button type="submit">Submit</button>
</form>
app.component.ts:
import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms'
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
valuesArray: [];
aForm: FormGroup;
constructor(
private _formBuilder: FormBuilder
){
this.aForm = new FormGroup({
ValuesArray: new FormControl('')
})
}
onSubmit() {
let stringIn = this.aForm.controls.ValuesArray.value;
stringIn = stringIn.split(',');
for (let i =0; i < stringIn.length; i++){
console.log(stringIn[i]);
}
}
}