时间戳

首页 > 解决方案 > 无法将html页面的表单值获取到打字稿页面角度6

html - 无法将html页面的表单值获取到打字稿页面角度6

问题描述

我的 Typescript 和 HTML 代码如下所示：

 stateCtrl = new FormControl();

  onSubmit(data) {

    this.onNameSelect(name);
    const deatails = JSON.stringify({
 
                                     CampaignId: data.Campaign
   
                                    });
    this.webService.CallDetails(deatails)
    .subscribe(
      response => {
        this.Model = response;
      },
      (error) => console.error(error)
    );
  }
<form (ngSubmit)="onSubmit(callform.value)" #callform="ngForm">

 <div class="col-md-3 col-lg-3">

  <mat-form-field>
  
    <input matInput placeholder="Campaign" aria-label="State" name="Campaign" [matAutocomplete]="auto" [formControl]="stateCtrl">
    
    <mat-autocomplete #auto="matAutocomplete">
    
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.Name">
        <span>{{state.Name}}</span>
        
      </mat-option>
      
    </mat-autocomplete>
    
  </mat-form-field>
  
 </div>

</form>

现在的问题是当我提交表单时，我没有得到输入字段的值。谁能指出我哪里出错了？提前谢谢了。

这是我的控制台日志。

这是我的控制台日志。

标签： htmlangulartypescriptangular6

解决方案

因此，根据我在您的代码中阅读和理解的内容，您需要实现Reactive表单，为此，您首先需要[formGroup]表单级别。在您的 html 中：

<form  [formGroup]="myFormGroup" (ngSubmit)="onSubmit(callform.value)" #callform="ngForm">
 <div class="col-md-3 col-lg-3">
  <mat-form-field>
    <input matInput placeholder="Campaign" aria-label="State" name="Campaign" formControlName="stateCtrl">
  </mat-form-field>
 </div>

</form>
<button (click)="callform.onSubmit()"> Send
</button>

并在您的.ts文件中：

import {Component} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'form-field-example',
  templateUrl: 'form-field-example.html',
})
export class FormFieldExample {
  myFormGroup: FormGroup;

  constructor(fb: FormBuilder) {
    this.myFormGroup = fb.group({
      stateCtrl: '',
    });
  }
    onSubmit(data){
    console.log(data);
  }
}

推荐阅读