Eu sunt încercarea de a utiliza materialul unghiular automată componentă în angular2 proiect. Am adăugat următoarele meu șablon.
<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>
În urma mea componentă.
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;
}
}
Am'm primesc urmatoarea eroare. Se pare ca formControl
directive este de a nu fi găsit.
Pot't se leagă de 'formControl' de e't un cunoscut proprietatea de 'de intrare'
Care este problema aici?
În timp ce utilizați formControl
, trebuie să importați `ReactiveFormsModule la "importuri" matrice.
Exemplu:
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
...
})
export class AppModule {}
Uita de încercarea de a descifra exemplu .ts - cum au spus si altii este de multe ori incompletă.
În loc doar să faceți clic pe 'pop-out' pictogramei încercuite aici și te'll obține o complet de lucru StackBlitz exemplu.
Se poate confirma rapid modulele necesare:
Comentați orice cazuri de ReactiveFormsModule
, și destul de sigur de tine'll obține eroare:
Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Începe prin adăugarea unui regulate matInput la șablonul. Las's presupunem tine're folosind formControl directiva din ReactiveFormsModule pentru a urmări valoarea de intrare.
Reactive forme oferi o abordare bazată pe modelul de manipulare formă de intrări ale căror valori se modifică în timp. Acest ghid vă arată cum să creați și actualizați-o formă simplă de control, progresul folosind mai multe controale într-un grup, de a valida formularul de valori, și să pună în aplicare forme mai avansate.
import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule
...
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MaterialModule],