Блог

У меня есть мой Typescript amp; 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>  

теперь проблема в том, что когда я отправляю форму, я не получаю значение поля ввода. Кто-нибудь может указать, где я ошибаюсь? Заранее большое спасибо.

Вот мой журнал консоли.

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

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

Директива 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

Вы можете использовать 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);
}
  

Вы должны добавить formControlName="stateCtrl" вместо [formControl]="stateCtrl" . Удачи!