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.

1 Answers

0
Juan Pike On

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