Question

我显然正在导入ReactiveFormsModule，但仍然出现错误

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>

Answer 1

FormControl

跟踪单个表单控件的值和验证状态。

例如，在输入上使用它，而不是在div上使用，因为它无法绑定到它

Answer 2

R。理查兹是对的。您应该将[formGroup]放在div（不必是表单）和formControlName上。 Angular抱怨是因为div不是实现ControlValueAccessor的元素或组件。

无法绑定到“ formControl”，因为它不是“ div”的已知属性-Angular 2

2 个答案: