Impossible de se lier à 'formControl' car il ne s'agit pas d'une propriété connue de 'input' - problème d'autocomplétion matérielle dans Angular2

Question

J'essaie d'utiliser Angular Material Autocomplétion dans mon projet Angular 2. J'ai ajouté ce qui suit à mon modèle.

<md-input-container>
   <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
   <md-option *ngFor="let state of filteredStates | async" [value]="state">
      {{ state }}
   </md-option>
</md-autocomplete>

Voici mon composant.

import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";

@Component({
    templateUrl: './edit_item.component.html',
    styleUrls: ['./edit_item.component.scss']
})
export class EditItemComponent implements OnInit {
    stateCtrl: FormControl;
    states = [....some data....];

    constructor(private route: ActivatedRoute, private router: Router) {
        this.stateCtrl = new FormControl();
        this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));
    }
    ngOnInit(): void {
    }
    filterStates(val: string) {
        return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
    }
}

J'obtiens l'erreur suivante. Il semble que le formControl n'est pas trouvée.

Impossible de se lier à 'formControl' car ce n'est pas une propriété connue de 'input'.

Quel est le problème ici ?

Answer 1

Ce qui a fonctionné pour moi, c'est de construire le formulaire à l'intérieur du modèle, dans le @component({}), par exemple

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  template:`
  <form class="validation-form" validate method="createUserWithEmailAndPassword">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="firstName">First name</label>
      <input type="text" [formControl]="firstName" id="firstName" placeholder="Please enter your first name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName">Last name</label>
      <input type="text" [formControl]="lastName" id="lastName" placeholder="Please enter your last name" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="email">Email address</label>
        <input type="email" [formControl]="email" id="email" aria-describedby="emailHelp" placeholder="Please enter your last name" required>
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="password">Password</label>
      <input type="password" [formControl]="password" id="password" placeholder="Please enter your password" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="zip">Zip</label>
      <input type="text" [formControl]="zip" id="zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>`,

  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {

  firstName =  new FormControl('');
  lastName =  new FormControl('');
  email =  new FormControl('');
  password =  new FormControl('');

  constructor() { }

  ngOnInit(): void {
  }

}

Cela a cessé de montrer des erreurs. Si l'erreur persiste, cette solution pourrait vous convenir.

Answer 2

Commencez par ajouter un matInput ordinaire à votre modèle. Supposons que vous utilisiez la directive formControl du ReactiveFormsModule pour suivre la valeur de l'entrée.

Les formulaires réactifs offrent une approche guidée par le modèle pour traiter les entrées de formulaire dont les valeurs changent au fil du temps. Ce guide vous montre comment créer et mettre à jour un simple contrôle de formulaire, puis comment utiliser plusieurs contrôles dans un groupe, valider les valeurs du formulaire et mettre en œuvre des formulaires plus avancés.

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],