'입력'의 알려진 속성이 아니므로 'formControl'에 바인딩할 수 없음 - Angular2 재료 자동 완성 문제

'입력'의 알려진 속성이 아니므로 'formControl'에 바인딩할 수 없음 - Angular2 재료 자동 완성 문제

저는 Angular 2 프로젝트에서 Angular Material Autocomplete 컴포넌트를 사용하려고 합니다.템플릿에 다음 내용을 추가했습니다.

<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'은 'input'의 알려진 속성이 아니므로 바인딩할 수 없습니다.

여기서의 문제는 무엇입니까?

사용 중formControl, Import해야 합니다.ReactiveFormsModule고객님께imports어레이를 설정합니다.

예:

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

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

다른 사람들이 종종 불완전하다고 말한 것처럼 예제 .ts를 해독하는 것은 잊어버려라.

여기에 동그라미를 친 '팝아웃' 아이콘을 클릭하면 StackBlitz의 완전한 작동 예를 볼 수 있습니다.

필요한 모듈을 빠르게 확인할 수 있습니다.

의 모든 인스턴스를 코멘트 아웃합니다.ReactiveFormsModule에러가 발생하는 것은 당연합니다.

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. 

이 문제가 발생할 수 있는 또 다른 이유는 다음과 같습니다.

사용 중인 컴포넌트formControlin이 Import된 모듈에서 선언되지 않았습니다.ReactiveFormsModule.

따라서 이 오류를 발생시키는 컴포넌트를 선언하는 모듈을 확인합니다.

버전 9.1.4부터는 Import만 하면 됩니다.ReactiveFormsModule

https://angular.io/guide/reactive-forms

각도 12에서 matautocomplete Module의 Import 경로가 변경되어 문제가 해결되었습니다.이제 이렇게 생겼네

먼저 템플릿에 일반 matInput을 추가합니다.입력 값을 추적하기 위해 Reactive Forms Module의 formControl 명령을 사용한다고 가정합니다.

사후 대응 양식은 시간이 지남에 따라 값이 변화하는 양식 입력을 처리하는 모델 중심 접근 방식을 제공합니다.이 안내서에서는 간단한 양식 컨트롤을 작성 및 업데이트하고, 한 그룹에서 여러 컨트롤을 사용하는 방법으로 진행하며, 양식 값을 검증하고 고급 양식을 구현하는 방법을 보여 줍니다.

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

...

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

예를 들어 @component({})의 템플릿 "" 내에 폼을 작성하는 것이 효과적이었습니다.

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

}

이것으로 에러가 표시되지 않게 되었습니다.에러가 해소되지 않는 경우는, 이 문제가 해결될 가능성이 있습니다.

나에게 효과가 있었던 것은 수입품을 신고와 수출 이전으로 옮긴 것입니다.왜 이것이 효과가 있었는지 모르겠지만, 그것은...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatSlideToggleModule,
  ],
  declarations: [SettingsComponent],
  exports: [
    SettingsComponent
  ]
})
export class SettingsModule { }

언급URL : https://stackoverflow.com/questions/43220348/cant-bind-to-formcontrol-since-it-isnt-a-known-property-of-input-angular