无法获取html页面的表单值到typescript页面angular 6

Question

我有我的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>

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

这是我的控制台日志。

Answer 1

使用ngForm指令，您不需要formControl，因为它们用于反应形式。我想，你想使用模板驱动的形式。你没有得到价值，因为你需要绑定。来自官方docs：

NgForm指令补充了具有附加功能的表单元素。它包含您使用ngModel指令和name属性为元素创建的控件，并监视其属性，包括其有效性。

HTML模板：

<input [(ngModel)]="Campaign" matInput placeholder="Campaign" aria-label="State" name="Campaign" [matAutocomplete]="auto">

从输入中获取组件的价值：

onSubmit(data) {
  console.log('details', data.Campaign);
}

stackblitz

Answer 2

因此，根据我在您的代码中阅读和理解的内容，您需要实现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);
  }
}

Answer 3

您可以使用ngModel。这肯定会奏效。怎么样？见下文：

HTML：

<form (ngSubmit)="onSubmit()" #callform="ngForm">

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

  <mat-form-field>

    <input matInput [(ngModel)]="Campaign" placeholder="Campaign" aria-label="State" name="Campaign"  [matAutocomplete]="auto" [formControl]="stateCtrl">
    ...

TS：

Campaign: string 
onSubmit() {
  console.log(this.Campaign);
}

Answer 4

你必须添加formControlName="stateCtrl"而不是[formControl]="stateCtrl"。祝好运！