Agfdhyk

I want to push an array comment in to cabin.comments array after a form is submited.
I have created my form but I am getting a error saying:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("

I am using a JSON database.

I am really new to ionic and I am lost.

this is my form

  <form [formGroup]="commentform" (ngSubmit)="onSubmit()">

  <ion-item>

    <ion-label>Name</ion-label>

    <ion-input type="text" formControlName="author"></ion-input>

  </ion-item>

  <ion-item>

    <ion-label>Rating</ion-label>

    <ion-input type="text" formControlName="rating"></ion-input>

  </ion-item>

  <ion-item>

    <ion-label>Comment</ion-label>

    <ion-textarea formControlName="comment"></ion-textarea>

  </ion-item>

  <button ion-button type="submit" [disabled]="!commentForm.valid">Submit</button>

</form>

This is my cabin page

import { Component, OnInit } from '@angular/core';

import { LoadingController } from '@ionic/angular';

import { CabinService } from '../../services/cabin.service';

import { ActivatedRoute, Router } from '@angular/router'

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

import { Location } from '@angular/common';



@Component({

  selector: 'app-cabin-detail',

  templateUrl: './cabin-detail.page.html',

  styleUrls: ['./cabin-detail.page.scss'],

})

export class CabinDetailPage implements OnInit {





  cabin: any = {};

  comment: any;



   cabins: any;

  commentform: FormGroup;

  errMess: any;





  formErrors = {

    'author' : '',

    'rating' : '',

    'comment' : ''

  };



  validationMessages = {

    'author' : {

      'required' : 'Name is required',

      'minlength' : 'Name must be at least 2 characters long',

      'maxlength' : 'Name cannot be more that 25 characters long'

    }

  };



  constructor(public api: CabinService,

      public loadingController: LoadingController,

      private fb: FormBuilder,

      private location: Location,

      public route: ActivatedRoute,

      public router: Router) {

this.createForm();

      }





  async getCabin() {

  const loading = await this.loadingController.create();

  await loading.present();

  await this.api.getCabinById(this.route.snapshot.paramMap.get('id'))

    .subscribe(res => {

      console.log(res);

      this.cabin = res;

      loading.dismiss();

    }, err => {

      console.log(err);

      loading.dismiss();

    });

}



 ngOnInit() {

  this.getCabin();

}







    createForm() {

    this.commentform = this.fb.group({

      author: ['', [ Validators.required, Validators.minLength(2) ] ],

      rating: 5,

      comment: ['', [ Validators.required ] ],

    });



    this.commentform.valueChanges

      .subscribe(data => this.onValueChanged(data));



    this.onValueChanged(); // (re)set form validation messages

  }



    onValueChanged(commentformData?: any) {

    if (!this.commentform) {

      return;

    }

    const form = this.commentform;

    for (const field in this.formErrors) {

      this.formErrors[field] = '';

      const control = form.get(field);

      if (control && control.dirty && !control.valid) {

        const messages = this.validationMessages[field];

        for (const key in control.errors) {

          this.formErrors[field] += messages[key] + ' ';

        }

      }

    }



    if (this.commentform.valid) {

      this.comment = this.commentform.value;

    } else {

      this.comment = undefined;

    }

  }





  onSubmit() {

      const id = +this.route.snapshot.paramMap.get('id');



    this.cabin.comments.push(this.comment);

    this.api.updateComment(this.cabin.id, this.comment).subscribe(() => {

    console.log("PUT is done");

})



  }











}

My service to save to the database

updateComment(id, newcomment) {

const comment: Comment = newcomment;

return this.http.get<any>('http://localhost:3000/cabins/' + id).pipe(

  map(cabin => {





    return {

      id: cabin.id,

      name: cabin.name,

      image: cabin.image,

      description: cabin.description,

      priceweek: cabin.priceweek,

      pricemonth: cabin.pricemonth,

      featured: cabin.featured,

      comments: cabin.comments





    };





  }),

  flatMap((updatedCabin) => {

    updatedCabin.comments.push(comment);

    return this.http.put( + '/' + id, updatedCabin);

  })

);

}

This is a stackblitz to my project https://stackblitz.com/edit/ionic-xjq8ic?embed=1&file=app/pages/cabin-detail/cabin-detail.page.html

you need to

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

into your module.

e.g

import { NgModule } from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

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

import { AppComponent }  from './app.component';



@NgModule({

    imports: [

        BrowserModule,

        FormsModule,

        ReactiveFormsModule

    ],

    declarations: [

        AppComponent

    ],

    bootstrap: [AppComponent] })



export class AppModule { }

this will fix this issue