Can anyone show me a small example to fetch data from form? using ionic 4, CLI 5.4.1

Trying build a crud application,
Below is my html form, I want to fetch data from the form to the .ts file to save in to the database, it would be great help for me.

Name
<ion-item>
  <ion-label position="floating">Description</ion-label>
  <ion-input type="text" ></ion-input>
</ion-item>


<ion-button type="submit" expand="block" class="ion-padding"  color="tartiary"    fill="outline">Submit</ion-button>

Are you talking about how to get value from input? if yes then try this solution:
in html:
<input type="text" class="form-control bg-none border-0" (input)="onGetValue($event)" />
and in ts, define function onGetValue and pass the event like this:

onGetValue(event) {
      this.variable = (<HTMLInputElement>event.target).value;
      console.log(this.variable);
  }

here is the another easy approach:
in html:

    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <ion-list>
        <ion-item>
          <ion-label position="fixed">Group Title</ion-label>
          <ion-input
                  type="text"
                  placeholder="Beautiful Mosique..."
                  name="title"
                  ngModel
                  required></ion-input>
        </ion-item>
 <ion-grid>
        <ion-row>
          <ion-col>
            <ion-button
                    [disabled]="!f.valid"
                    expand="block"
                    fill="outline"
                    color="tertiary"
                    type="submit">
              <ion-icon name="save"></ion-icon>
              Add
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
</form>

Note: in the ion-input field you must name and ngModel.
in ts:define function onSubmit and pass form: with of type Form like this:

import {NgForm} from '@angular/forms';
...
...
...
 onSubmit(form: NgForm) {
    console.log(form.value);
  }

Hope it will help your.

thanks, Hammad6264 I applied your code , it is showing " Error: Uncaught (in promise): NullInjectorError."
Am i missed any dependencies to add? I am new to ionic.
It would be very helpful for me if you can show me sending data to the API as well.

I would suggest emulating the idioms in the Angular forms docs.

Can you share screenshort of the error you get?

You can use ( HttpClient ) for this. Then send your response to some url or API let say. for this you first have to declare ( HttpClientModule ) from ( @angular/common/http ) in app.module.ts inside imports: and import it at the top. Something like this:


the code shown in the screenshort:

import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
     ShareModule,
      HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and then Import httpClient in the page where you want to post data, something like this:

import {HttpClient} from '@angular/common/http';
......
.....
....

constructor(private httpClient: HttpClient) {}

After all of that you are done to post data to somewhere you want to? let say we have some dummy data to post like here look at this screenshort:


in this screenshort the data object is have some dummy text, and We want to post it url or API. you can post this data using httpClient which have a post method which allows us to do that:

this.httpClient.post('your+url', data).subscribe((res) => {
        console.log(res);
    }, (err) => {
        console.log(err);
  });

inside the post method, you have to pass some arguments, the first argument is your url and second one is the object you wanted to be pass. I Hope you will be understand how it works and I hope it will help you. let me know if it works? or you face any other issue?