Блог

Везде, где я обращаюсь к нему, говорится, что это потому, что я не импортирую FormsModule, но я импортирую.

Ошибка:

Не удается привязаться к ‘FormGroup’, поскольку это неизвестное свойство ‘form’.

 141       <form class="w-50" [formGroup]="stateform" (ngSubmit)="submit()">
 

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FormsModule,
    ReactiveFormsModule, 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

component.html

 <form class="w-50" [formGroup]="stateform" (ngSubmit)="submit()">
    <div>
      <div class="form-row align-items-end">
        <div class="col">
          <label for="state">State</label>
          <select
            id="dropdownState"
            formControlName="state"
            (change)="changeState($event)"
            class="form-control mb-2 mr-sm-2">
            <option disabled>Select State</option>
            <option>Choose State</option>
            <option *ngFor="let state of states; let i = index">
              {{state.name}}
            </option>
          </select>
          <div *ngIf="f.state.touched amp;amp; f.state.invalid" class="alert alert-danger">
              <div *ngIf="f.state.errors.required">State is required.</div>
          </div>
        </div>
      
        <div class="col-auto">
          <button type="submit" class="btn btn-secondary mb-2" [disabled]="!stateform.valid">Search</button>
        </div>
      </div>
    </div>
  </form>
 

component.ts

 import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

  states = [      
    { id: 101, abbr: "AL", name: "Alabama" },
    { id: 102, abbr: "AK", name: "Alaska" },
    { id: 104, abbr: "AZ", name: "Arizona" }
  ];   


  stateform = new FormGroup({
    state: new FormControl('', Validators.required)
  });

  get f(){
    return this.stateform.controls;
  }

  submit(){
    console.log(this.stateform.value);
  }

  changeState(e) {
    console.log(e.target.value);
  }

  constructor() {
  }

  ngOnInit() {

  }

}
 

Заранее благодарю