Дополнительно
Angular2 : Can't bind to 'formGroup' since it is't known property of 'form'
Я новичок в angular 2 и пытаюсь сделать реактивную форму, но у меня возникли проблемы. После долгих поисков в стеке я не нашел решения.
Здесь вы можете увидеть мою ошибку
Код :
Просмотр
<main>
<div class="container">
<h2>User data</h2>
<form [formGroup]="userForm">
<div class="form-group">
<label>name</label>
<input type="text" class="form-control" formControlName="name">
</div>
<div class="form-group">
<label>email</label>
<input type="text" class="form-control" formControlName="email">
</div>
<div class="" formGroupName="adresse">
<div class="form-group">
<label>Rue</label>
<input type="text" class="form-control" formControlName="rue">
</div>
<div class="form-group">
<label>Ville</label>
<input type="text" class="form-control" formControlName="ville">
</div>
<div class="form-group">
<label>Cp</label>
<input type="text" class="form-control" formControlName="cp">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</main>
Мой модуль.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ContactComponent } from './contact.component';
import { FormGroup , FormControl , ReactiveFormsModule , FormsModule } from '@angular/forms';
@NgModule({
imports: [
NgModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
FormGroup,
FormControl
],
declarations: [
ContactComponent
]
})
export class ContactModule {}
И мой component.ts
import {Component} from '@angular/core';
import { FormGroup , FormControl } from '@angular/forms';
@Component({
selector: 'contact',
templateUrl: './contact.component.html'
// styleUrls: ['../../app.component.css']
})
export class ContactComponent {
userForm = new FormGroup({
name: new FormControl(),
email: new FormControl(),
adresse: new FormGroup({
rue: new FormControl(),
ville: new FormControl(),
cp: new FormControl(),
})
});
}
Я не понимаю свою ошибку, потому что импорт ReactiveForm находится здесь. Так что ... мне нужна ваша помощь :) Спасибо
После того, как я прочитал ваш ответ и рефакторинг моего кода, все в порядке, это работает! Проблема была в том, что я импортировал модуль reactive в модуль моей страницы контакта, а мне нужно импортировать его в модуль моего приложения. Так что спасибо большое за ваш интерес :)
Надеюсь, этот ответ поможет другим людям.
20
3
Я думаю, что это старая ошибка, которую вы пытались исправить, импортируя случайные вещи в ваш модуль, и теперь код больше не компилируется. пока вы не обращаете внимания на вывод оболочки, браузер перезагружается, и вы все еще получаете ту же ошибку.
Ваш модуль должен быть :
Попробуйте также добавить модуль ReactiveFormsModule в свой компонент.
Не используйте
userForm = new FormGroup()
.Вместо этого используйте
form = new FormGroup()
.А в форме используйте
...
. У меня это работает с angular 6