angular - tutorial - primeng




لا يمكن ربط "formControl" نظرًا لأنها ليست خاصية معروفة لـ "الإدخال"-مشكلة الإكمال التلقائي للمواد الزاوي 2 (2)

أحاول استخدام مكون autocomplete للمواد الزاوي في مشروع الزاوي 2. أضفت التالية لقالب بلدي.

<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>

التالي هو المكون الخاص بي.

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;
    }
}

أتلقى الخطأ التالي. يبدو أنه لم يتم العثور على توجيه formControl .

لا يمكن الارتباط بـ "formControl" نظرًا لأنها ليست خاصية معروفة لـ "الإدخال"

ما هي المشكلة هنا؟


أثناء استخدام formControl ، يجب عليك استيراد ReactiveFormsModule إلى صفيف imports الخاصة بك.

مثال:

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}

ابدأ بإضافة matInput منتظم إلى القالب الخاص بك. دعنا نفترض أنك تستخدم توجيه formControl من ReactiveFormsModule لتعقب قيمة الإدخال.

توفر النماذج التفاعلية أسلوبًا يحركه التعامل مع مدخلات النماذج التي تتغير قيمها بمرور الوقت. يوضح لك هذا الدليل كيفية إنشاء وتحديث عنصر تحكم بسيط في النموذج ، والتقدم في استخدام عناصر تحكم متعددة في مجموعة ، والتحقق من صحة قيم النموذج ، وتنفيذ نماذج أكثر تقدمًا.

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

...

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




angular-forms