将数据从 HTML 页面传递到打字稿文件答案

【问题标题】：Pass data from HTML page to typescript file将数据从 HTML 页面传递到打字稿文件
【发布时间】：2020-03-07 03:28:21
【问题描述】：

我有一个用于登录页面的 ngForm。我尝试将数据传递给 .ts 文件，但未能在控制台上打印它们。

这是我的代码：

<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);
}

【问题讨论】：

我在您的代码中没有发现任何问题。这是一个工作演示。 https://angular-ybbamr.stackblitz.io
项目无法加载，我收到此错误：compiler.js:2409 未捕获错误：模板解析错误：没有将“exportAs”设置为“ngForm”的指令（“

]#institutesForm="ngForm" (ngSubmit)="instituteLogins(institutesForm)">
import in appModule imports --> FormsModule in module
即使我也没有在您的代码中遇到任何错误。确保导入 app.module.ts 文件和功能模块中的所有模块。
这能回答你的问题吗？ Angular2 Error: There is no directive with "exportAs" set to "ngForm"

标签： html angular

【解决方案1】：

您尚未在 app.module.ts 中添加 FormsModule。

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

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

工作演示：https://stackblitz.com/edit/angular-ybbamr

【讨论】：

【解决方案2】：

在这种情况下应该是这样的：

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

    console.log(this.institute);
   }

【讨论】：

"元素隐含地具有 'any' 类型，因为类型 'typeof globalThis' 没有索引签名。"当我说 this.institute 时出现此错误

【解决方案3】：

好吧，我认为你应该使用 FormControlName 而不是 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()
});

}

【讨论】：