Wednesday, July 8, 2020
therichposts@gmail.com
Angular 8Angular 9Angular7Bootstrap 4

Angular 9 – How to make ngform input pre-filled?

Angular 9 - how to reset form after submit?
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 – How to make ngform input pre-filled?

Post Working:

In this post, I am making angular 9 ngform input prefilled during updation time. Form Angular 9 good looks, I have also used Bootstrap 4.

Here is the code snippet and please use carefully:

1. Here is my HTML code and I have added to my app.component.html file:

I have added some code related to validation so for that you can check my old posts related to reactive form validations

<form class="form-horizontal" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
   <label class="control-label col-sm-2" for="name">Name:</label>
   <div class="col-sm-10">
      <input type="text" class="form-control" id="uname" placeholder="Enter Name" name="uname" formControlName="firstName" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }">
      <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
         <div *ngIf="f.firstName.errors.required">First Name is required</div>
      </div>
   </div>
</div>
<div class="form-group">
   <label class="control-label col-sm-2" for="email">Email:</label>
   <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" formControlName="email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
      <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
         <div *ngIf="f.email.errors.required">Email is required</div>
         <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
      </div>
   </div>
</div>
<div class="form-group">
   <label class="control-label col-sm-2" for="phone">Phone:</label>
   <div class="col-sm-10">
      <input type="text" class="form-control" id="phone" placeholder="Enter Phone" name="phone" formControlName="phone" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }">
      <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
         <div *ngIf="f.phone.errors.required">Phone is required</div>
      </div>
   </div>
</div>
<div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Update</button>
   </div>
</div>
</form>

 

2. Here is code and I have added into my add.component.ts file:

I have added the value to my ngform input during API call and this code is only for to put the values and you can use this code with your own way according to requirements

registerForm: FormGroup

registerForm connects formdata with value and valid state

// I have used setValue function

this.registerForm.get('firstName').setValue(data.name);
this.registerForm.get('email').setValue(data.email);
this.registerForm.get('phone').setValue(data.phone);

 

If you have any kind of query regarding ngform then you can comment below.

Jassa

Thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.