Dear Friends,
I am working in ionic3. I try to add a Radio group button for a form. My HTML code is:
<ion-list radio-group formControlName="lgs" [(ngModel)]="data.lgs">
<ion-list-header>
Auto Manufacturers
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-list>
My .ts file with respective part is
export class BirthCertificatePage {
formgroup:FormGroup;
username:AbstractControl;
color:AbstractControl;
lgs:AbstractControl;
data:any = {};
users: any;
payPage : any;
constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient, public formbuilder: FormBuilder, public propertyProvider: PropertyProvider ) {
this.formgroup = formbuilder.group({
username:['',Validators.required],
color: ['',Validators.required]
});
this.username = this.formgroup.controls['username'];
this.color = this.formgroup.controls['color'];
this.lgs = this.formgroup.controls['lgs'];
this.data.username = '';
this.data.response = '';
this.data.color = '';
this.data.lgs = '';
this.getUsers();
this.payPage = PayPage;
}
for other controls it work fine. But for this radio it show error as
Uncaught (in promise): Error: Cannot find control with name: ‘lgs’ g@http://localhost:8100/build/polyfills.js:3:7130 _throwError@http://localhost:8100/build/main.js:25309:11 setUpControl@http://localhost:8100/build/main.js:25217:9 FormGroupDirective.prototype.addControl@http://localhost:8100/build/main.js:28199:9 FormControlName.prototype._setUpControl@http://localhost:8100/build/main.js:28787:25 FormControlName.prototype.ngOnChanges@http://localhost:8100/build/main.js:28705:13 checkAndUpdateDirectiveInline@http://localhost:8100/build/main.js:11183:9 checkAndU
Please advise what I am wrong with
Thanks
Anes