Can't bind to 'formControl' since it isn't a known property of 'div' - Angular 2

Question

I am clearly importing the ReactiveFormsModule, but I still get the error

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { environment } from './environments/firebase'
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { MaterialModule } from "./modules/material/material.module";
import { SharedModule } from './modules/shared/shared.module';
import { RoutingModule } from './modules/routing/routing.module';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase, 'chainetix-office'),
    AngularFirestoreModule,
    MaterialModule,
    SharedModule,
    RoutingModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

add-employee.component.ts

import { Component, OnInit } from '@angular/core';
import { MatFormFieldControl } from "@angular/material/form-field/typings/form-field-control";
import { FormBuilder, FormGroup, FormControl, ReactiveFormsModule } from "@angular/forms";

@Component({
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.sass'],
})
export class AddEmployeeComponent implements OnInit {
  parts = new FormControl();

  constructor(
    // fb: FormBuilder
  ) {
    // this.parts = fb.group({
    //   email: '',
    //   fname: '',
    //   ln: '',
    //   addr1: '',
    //   addr2: '',
    //   city: '',
    //   postcode: '',
    //   bankName: '',
    //   bankNumber: '',
    //   bankSortCode: '',
    // })
  }

  ngOnInit() {}

}
class Employee {
  constructor(
    Email: string,
    Firstname: string,
    Lastname: string,
    Address_Line1: string,
    Address_Line2: string,
    Address_City: string,
    Address_PostCode: string,
    Bank_AccountName: string,
    Bank_AccountNumber: string,
    Bank_SortCode: string,
  ) {}
}

add-employee.component.html

<div [formControl]='parts'>
  <mat-form-field>
    <input matInput placeholder="Email" value="" #text required formControlName='email'>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="First Name" value="" required formControlName='fname'>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Last Name" value="" required formControlName="lname">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Address Line 1" value="" required formControlName="addr1">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Address Line 2" value="" required formControlName="addr2">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="City" value="" required formControlName="city">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Postcode" value="" required formControlName="postcode">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Bank Account Name" value="" required formControlName="bankName">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Bank Account Number" value="" required formControlName="bankNumber">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Bank Sort Code" value="" required formControlName="bankSortCode">
  </mat-form-field>
</div>

Perhaps you should be using `formGroup` rather than `formControl`, and `form` rather than `div`? [Reactive Forms](https://angular.io/guide/reactive-forms). — R. Richards, Jul 06 '18 at 21:48

score 0 · Answer 1 · answered Jul 06 '18 at 22:01

0

FormControl

Tracks the value and validation status of an individual form control.

So use it on an input for example, not on a div as it cannot be bound to it

answered Jul 06 '18 at 22:01

Vega

27,856
27
95
103

See also https://stackoverflow.com/q/45659742/5468463 and https://stackoverflow.com/a/45659791/5468463 – Vega Jul 06 '18 at 22:02

score 0 · Accepted Answer · answered Jul 06 '18 at 22:06

0

R. Richards is right. You should put [formGroup] on the div (doesn't have to be a form) and the formControlName. Angular is complaining because div isn't a element or componment that implements ControlValueAccessor.

answered Jul 06 '18 at 22:06

g4j

51
4

Can't bind to 'formControl' since it isn't a known property of 'div' - Angular 2

2 Answers2