Angular 4/5 how to form submit?

In my last article i have discussed on validations and how to display errors in the angular forms. In this article I discuss on how to submit form and how to get data of submitted forms values.

For Form submit in angular we have use ngSubmit built in directive. we can call like below syntax.

 <form [formGroup]="signupfrm" (ngSubmit)="process()">

In form tag we have added ngSubmit as directive and its function name. we need to create that function in “.ts” file.


Last time we have created signup component. Here is the HTML of the form.
signup.component.html

<div class="container">
 <div class="row">
 <div class="col">
 <h3 class="text-center">Sign UP</h3>
 <form [formGroup]="signupfrm" (ngSubmit)="process()">
 <fieldset>
 <div class="form-group">
 <label>Name</label>
 <input type="text" name="name" formControlName="name" class="form-control">
 <control-messages [control]="signupfrm.controls.name" class="error-msg messages text-left text-danger"></control-messages>
 </div>
 </fieldset>
 <div class="form-group">
 <label>Email</label>
 <input type="email" name="email" formControlName="email" class="form-control">
 <control-messages [control]="signupfrm.controls.email" class="error-msg messages text-left text-danger"></control-messages>
</div>
<div class="form-group">
 <label>Country</label>
 <select class="form-control">
 <option value="">Please select a country</option>
 <option *ngFor="let c of country" value="{{c.value}}">{{c.name}}</option>
 </select>
 </div>
 <div class="row">
 <div class="col-md-12">
 <button type="submit" [disabled]="!signupfrm.valid" class="btn btn-primary btn-md btn-block waves-effect text-center m-b-20">Submit</button>
 </div>
 </div>
</form>
 </div> 
 </div> 
 </div>



In signup.component.ts file we need to create function called process()


 process(){
    
    console.log(this.signupfrm.value); //get full object
    console.log(this.signupfrm.value.email); //get only email value
  }

In process function you can get all values using form-name then “ object value of the value“. Also single field value you can get after “value” then added filed name to get particular filed value.

You can see the video form submission and getting values of the field.

Spread the love
  • 15
  •  
  •  
  •  
  •  
  •  
  •  
  •