import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { AuthenticationModule } from './modules/authentication/authentication.module';
import { SharedModule } from './modules/shared/shared/shared.module'
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { LandingModule } from './modules/landing/landing.module';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AuthenticationModule,
SharedModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
},
extend: true,
isolate: false
}),
LandingModule
],
providers: [HttpClientModule],
bootstrap: [AppComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [],
imports: [
CommonModule,
TranslateModule.forRoot(),
MatButtonModule,
MatCardModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
ReactiveFormsModule
],
exports: [
CommonModule,
MatButtonModule,
MatCardModule,
MatFormFieldModule,
MatInputModule
]
})
export class SharedModule { }
import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
@Component({
selector: 'segura-forgot-password',
templateUrl: './forgot-password.component.html',
styleUrls: ['./forgot-password.component.scss']
})
export class ForgotPasswordComponent implements OnInit {
email = new FormControl('', [Validators.required, Validators.email]);
getErrorMessage() {
if (this.email.hasError('required')) {
return 'You must enter a value';
}
return this.email.hasError('email') ? 'Not a valid email' : '';
}
constructor() { }
ngOnInit(): void {
}
}
还有我遗忘的.password.html
<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>Enter your email</mat-label>
<input matInput placeholder="pat@example.com" [FormControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
认证模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthenticationRoutingModule } from './authentication-routing.module';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password/forgot-password.component';
import { SharedModule } from '../shared/shared/shared.module';
import { RegisterComponent } from './components/register/register/register.component';
import { LoginComponent } from './components/login/login/login.component';
import { LegalTermsComponent } from './components/legal-terms/legal-terms/legal-terms.component';
@NgModule({
declarations: [LoginComponent, ForgotPasswordComponent, RegisterComponent, LegalTermsComponent],
imports: [
CommonModule,
AuthenticationRoutingModule,
SharedModule
]
})
export class AuthenticationModule { }
在shared.module.ts中,您只是导入ReactiveFormsModule
。您还需要导出它以在其他模块中使用
@NgModule({
declarations: [],
imports: [
...
ReactiveFormsModule,
...
],
exports: [
...
ReactiveFormsModule,
...
]
})
在forgot.password.html中,语法是
<input matInput placeholder="pat@example.com" [formControl]="email" required>
不是[FormControl]=“email”
我曾经在Ingangle2/4中使用过窗体构建器,但现在我在Ingangle6中使用它。我见过这个问题(不能绑定到“form group”,因为它不是“form”的已知属性),但它是针对angular 2的。我对角4做了同样的事情,但我得到了这个错误。请帮忙:我的代码是: app.module.ts:(我已导出FormsModule和ReactiveFormsModule): login.comp
我在angular 2是新的,我试图做一个反应形式,但我有一些麻烦。在堆栈中找了很多遍后,我没有找到解决方案。 在这里你可以看到我的错误 代码: 希望这个答案能帮助别人。
我想在离子页面上做一个表单,但我有那个错误。图像误差 我一直在搜索这个问题,更流行的解决方案是导入ReactiveFormsModule,但正如您所看到的,它是正确导入的。怎么会有问题呢? 表单位于一个页面(editpage)中,该页面作为模式从tab2页面启动。
(为简洁起见进行了简化) modal-dialog.html modal-body.html(使用angular2-component-outlet的动态模板)
下面是我模块中的代码
我使用Angular ReactiveFormsModule创建了一个表单,但在构建应用程序时得到了这个错误消息 src/app/security/login/login.component.html中的错误:11:13-错误NG8002:无法绑定到“窗体组”,因为它不是“窗体”的已知属性。 html: login.component.ts security.module.ts