Pass data from HTML page to typescript file

Question

I have a ngForm for singup page. I have tried passing the data to the .ts file but failed to print them on console.

Here's my code:

<div class="column" style="padding: 7.5%">
<form #instituteForm="ngForm" (ngSubmit)="instituteLogin(instituteForm)">
    <div class="form-group">
        <label> Full Name </label>
        <input 
            type="text" 
            ng-maxlength="10" 
            hint="Full Name" 
            name="patient" 
            id="name" 
            class="form-control"
            [(ngModel)]="institute.patient">
        <label> Phone Number </label>
        <input 
            type="number" 
            hint="phone" 
            name="phoneno" 
            id="phone" 
            maxlength="10" 
            minlength="10" 
            class="form-control" 
            [(ngModel)]="institute.phoneno">
        <label> Aadhar Number </label>
        <input 
            type="number" 
            hint="aadhar" 
            id="aadhar" 
            name="aadhar" 
            maxlength="16" 
            minlength="16"
            class="form-control" 
            [(ngModel)]="institute.aadhar">
        <br><br>
    </div>
    <button id="signup" class="btn btn-primary" type="submit">Signup</button>
</form>
</div>

institute = {
    patient: '',
    phoneno: '',
    aadhar: '' 
};

instituteLogin(instForm: NgForm) {
    console.log("Entered new patient");
    console.log(instForm.value);
}

I don't see any problem in your code. Here is a working demo. [https://angular-ybbamr.stackblitz.io](https://angular-ybbamr.stackblitz.io) — MonkeyScript, Nov 11 '19 at 12:53
The project wouldn't load, and I get this error : compiler.js:2409 Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" ("

]#institutesForm="ngForm" (ngSubmit)="instituteLogins(institutesForm)"> — Akhilesh Pothuri, Nov 11 '19 at 12:54
even I am also not facing any error in your code. Make sure to import all modules in you app.module.ts file and in your feature module too. — Developer, Nov 11 '19 at 13:02
Does this answer your question? [Angular2 Error: There is no directive with "exportAs" set to "ngForm"](https://stackoverflow.com/questions/38648407/angular2-error-there-is-no-directive-with-exportas-set-to-ngform) — MonkeyScript, Nov 11 '19 at 13:25

score 2 · Accepted Answer · answered Nov 11 '19 at 13:00

2

You have not added the FormsModule in app.module.ts.

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

@NgModule({
    imports: [ 
        // Other imports  
        FormsModule 
    ]
})

Working demo : https://stackblitz.com/edit/angular-ybbamr

answered Nov 11 '19 at 13:00

MonkeyScript

4,776
1
11
28

score 1 · Answer 2 · answered Nov 11 '19 at 12:36

1

In this case it should be like this:

instituteLogin(): void{
    console.log("Entered new patient");

    console.log(this.institute);
   }

answered Nov 11 '19 at 12:36

irudji

229
1
3
12

"Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature." I get this error when I say this.institute – Akhilesh Pothuri Nov 11 '19 at 12:43

score 1 · Answer 3 · answered Nov 11 '19 at 13:12

Well, I think you should use FormControlName instead of ngModel.

html:

<div class="column" style="padding: 7.5%" >
   <form [formGroup]="institute" #instituteForm (ngSubmit)="instituteLogin()">
      <div class="form-group">
     <label> Full Name </label>
     <input type="text" ng-maxlength="10" hint="Full Name"   id="name"  class="form- 
      control" formControlName="patient">
       <label> Phone Number </label>
     <input type="number" hint="phone"  id="phone" maxlength="10" minlength="10"  
     class="form-control" formControlName="phoneno">

      <label> Aadhar Number </label>
       <input type="number" hint="aadhar" id="aadhar"  maxlength="16"  minlength="16" 
       class="form-control" formControlName="aadhar">
         <br><br>
      <button id="signup" class="btn btn-primary"  
      routerLink="../../home/dashboard">Signup</button>
      </div> </form>
     </div>

ts:

institute:FormGroup; 

instituteLogin(){
console.log("Entered new patient");

console.log(this.institute.value);


 }
constructor(private formBuilder:FormBuilder) { }
ngOnInit() {
this.institute =this.formBuilder.group( {
  patient: new FormControl(),
  phoneno:new FormControl(),
  aadhar:new FormControl()
});

}

Pass data from HTML page to typescript file

3 Answers3