Невозможно получить значение формы HTML-страницы для машинописной страницы угловой 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

Итак, в соответствии с тем, что я прочитал и понял в вашем коде, вам нужно реализовать форму 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 2

Используя директиву ngForm, вам не нужно formControl, потому что они используются для реактивных форм.Я думаю, вы хотите использовать шаблон на основе формы.Вы не получаете ценность, потому что вам нужно связывание.Из официальных документов :

Директива NgForm дополняет элемент формы дополнительными функциями.Он содержит элементы управления, созданные вами для элементов с директивой ngModel и атрибутом имени, и контролирует их свойства, включая их действительность.

HTML-шаблон:

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

Получение значения вкомпонент от ввода:

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

стекаблиц

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".Удачи!