rant
В предисловии я скажу, что мой первый пост был грубо закрыт кем-то, занимавшимся кармическим делом, и отметил, что мой пост закрыли, когда предоставленное решение не сработало. И связанная «дублирующая» публикация показала то же решение, которое я продемонстрировал и попробовал в своем оригинальном посте, поэтому я был бы признателен коллегам-SO из браузеров, чтобы не быть таким пренебрежительным, и полностью прочитать мой пост, прежде чем слепо принять решение закрыть его после демонстрация решения, которое не решило мой первоначальный вопрос.
end rant
Я пытаюсь создать форму для входа в систему Angular 9. Я понимаю Распространенная проблема в Angular с формами возникает из-за того, что не импортируется FormsModule в @ NgModule
Однако я импортировал FormsModule AND ReactiveFormsModule, и это не решило мою проблему
//from app.module.ts
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
ForumComponent,
PostComponent,
UserComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule,
FormsModule,
FormBuilder,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent],
})
И Ниже приведен HTML для моей формы в файле login.component. html, который, как я покажу, позже я немного реорганизовал.
<form class="box" action="" #loginForm="ngForm" (ngSubmit)="login()">
<div class="field">
<label for="" class="label">Email</label>
<div class="control has-icons-left">
<input type="email"
placeholder="e.g. bobsmith@rpi.edu"
class="input"
[(ngModel)] = "model.email"
required />
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
<div class="field">
<label for="" class="label">Password</label>
<div class="control has-icons-left">
<input type="password"
placeholder="*******"
class="input"
[(ngModel)] = "model.password"
required />
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<label for="" class="checkbox">
<input type="checkbox" />
Remember me
</label>
</div>
<div class="field">
<button class="button is-success" [disabled]="!loginForm.valid">
Login
</button>
</div>
</form>
Оригинальный ответ / ответ на мое первое сообщение Я предложил добавить formControlName к тегам <input>, но затем его поспешно отредактировали, чтобы сказать, что [(ngModel)] устарело. Прежде чем я смог вставить и продемонстрировать, что это все еще не работает, мое сообщение было закрыто.
Поэтому, поскольку Анон считает, что он знает, что его решение работает, позвольте мне поделиться с вами моей текущей настройкой HTML формы. Я следовал за документами для FormBuilder, и это то, к чему это привело.
<!-- LATEST HTML -->
<form class="box" action="" [formGroup]="loginForm" (ngSubmit)="login()">
<div class="field">
<label for="" class="label">Email</label>
<div class="control has-icons-left">
<input type="email"
placeholder="e.g. bobsmith@rpi.edu"
class="input"
formControlName = "email"
required />
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
<div class="field">
<label for="" class="label">Password</label>
<div class="control has-icons-left">
<input type="password"
placeholder="*******"
class="input"
formControlName = "password"
required />
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<label for="" class="checkbox">
<input type="checkbox" />
Remember me
</label>
</div>
<div class="field">
<button class="button is-success" [disabled]="!loginForm.valid">
Login
</button>
</div>
</form>
И в моем файле login.component.ts, это то, что у меня есть
import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from 'src/app/auth.service';
import { FormBuilder } from '@angular/forms';
@Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"],
})
export class LoginComponent implements OnInit {
model: any = {};
loginForm;
constructor(
private authService: AuthService,
private router: Router,
private formBuilder: FormBuilder
) {
this.loginForm = this.formBuilder.group({
email: '',
password: ''
});
}
ngOnInit(): void { }
login() {
this.authService.login(this.model).subscribe(
next => {
this.router.navigate(['/home']);
},
error => {
throw new Error("ERROR: Login failed");
}
);
}
}
Ок, круто , реорганизованный точно в соответствии со спецификациями согласно официальным Angular документам на FormBuilder . Ну, это ошибка, которая сбрасывается в мою консоль, когда я пытаюсь обслуживать приложение Angular.
ERROR in src/app/components/login/login.component.html:6:34 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
line 6 <form class="box" action="" [formGroup]="loginForm" (ngSubmit)="login()">
~~~~~~~~~~~~~~~~~~~~~~~
src/app/components/login/login.component.ts:8:15
line 8 templateUrl: "./login.component.html",
~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component LoginComponent.
Как уже было показано, дважды, теперь форма не компилируется - даже если точно следовать документам , Я был бы признателен за любую помощь, которую я могу получить, так как эта проблема вела меня на несколько часов вверх по стене. Спасибо