FormGroup is not working on Ionic with Angular 7

Question

I have this in my app.module.ts:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(),
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    SignalRModule.forRoot(createConfig)],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

and in my tab1.page.ts I have this:

import { FormsModule, FormGroup, FormControl, Validators } from '@angular/forms';

ngOnInit(): void {
    this.createForm();
    this.messageFromServerSubscription = this.cs.messageFromServer.subscribe(
      message => {
        this.message = message;
      }
    );
  }

createForm() {
this.form = new FormGroup({
  ipAddress: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  })
});
}

and in my tab1.page.html I use it like so:

<form [formGroup]="form">
        <ion-grid>
          <ion-row>
            <ion-col size-sm="6" offset-sm="3">
              <ion-item>
                <ion-label position="floating">Ip Address</ion-label>
                <ion-input 
                  type="text"
                ></ion-input>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>
      </form>

I think I have imported everything right in the app.module and in the tab1.page.ts. How come I still get the error: >> Can't bind to 'formGroup' since it isn't a known property of 'form'. Thank you.

have you declared a property called form inside the `component.ts` — Nithya Rajan, Apr 29 '19 at 10:25
so you have a line like `form: FormGroup` in your `tab1.page.ts` — Nithya Rajan, Apr 29 '19 at 10:27
@JohnVelasquez, NEVER call createForm in constructor. The way is write `
`. — Eliseo, Apr 29 '19 at 11:22
probably a duplicate: https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form — Digvijay, Apr 29 '19 at 11:58

Juan · Answer 1 · 2019-04-29T11:55:44.443

0

declare form: FormGroup

you haven't told the file that it needs to exist.

EDIT:1

use formbuilder, import {Validators, FormBuilder, FormGroup } from '@angular/forms';

inject it into your constructor (which isn't included in your quoted tab1.page.ts file?)

this.form = this.formBuilder.group({
    ipAddress: ['', validators.required]
});

then in the HTML ip address

edited Apr 29 '19 at 11:55

answered Apr 29 '19 at 10:25

Juan

108
8

I have that declared private form: FormGroup; – Ibanez1408 Apr 29 '19 at 11:26

FormGroup is not working on Ionic with Angular 7

1 Answers1