Skip to main content

angular - How to submit form data

app.component.ts 

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  formData:any = {};

  getFormValue(data:NgForm){
    this.formData = data.value;
  }
}
app.component.html 

<h2>Angular - Submit Form Data</h2>

<h3>
    Submitted name: {{formData.firstName}} {{formData.lastName}}
    age {{formData.age}}
</h3>

<form #userForm="ngForm" (submit)="getFormValue(userForm)">
    <input 
        name="firstName" 
        type="input" 
        placeholder="First name"
        style="padding:12px; font-size:large;"
        ngModel
    />
    <br/><br/>
    <input 
        name="lastName" 
        type="input" 
        placeholder="Last name"
        style="padding:12px; font-size:large;"
        ngModel
    />
    <br/><br/>
    <input 
        name="age" 
        type="input" 
        placeholder="Age"
        style="padding:12px; font-size:large;"
        ngModel
    />
    <br/><br/>
    <button style="padding:12px;">Submit</button>
</form>
app.module.ts 

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
More Angular tutorials
Labels: