angular - Angular 6表单提交的属性不存在
问题描述
我正在构建一个使用角度形式的角度应用程序。它适用于 angular 5 和 angular 6。但是当我通过 ng build -prod 部署它时,它会给出错误
这是我的登录组件代码
<form class="md-float-material form-material" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="text-center">
<img src="../../assets/images/logo.png" alt="logo.png">
</div>
<div class="auth-box card">
<div class="card-block">
<div class="row m-b-20">
<div class="col-md-12">
<h3 class="text-center">User Login</h3>
</div>
</div>
<div class="form-group form-primary">
<label for="username">Username</label>
<input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group form-primary">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<div class="form-group form-primary">
<button class="btn btn-primary btn-md btn-block waves-effect waves-light text-center m-b-20">Login</button>
</div>
<div class="row">
<div class="col-md-2">
<img src="../../assets/images/Logo-small-bottom.png" alt="small-logo.png">
</div>
</div>
</div>
</div>
</form>
这是 TS 代码
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AlertService, UserService } from '../_services';
@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
loginForm: FormGroup;
returnUrl: string;
selectedValue: 'observer';
constructor(
public formBuilder: FormBuilder,
public route: ActivatedRoute,
public router: Router,
public userService: UserService,
public alertService: AlertService) { }
public ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required],
});
this.userService.logout();
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
get f() { return this.loginForm.controls; }
public onSubmit() {
if (this.loginForm.invalid) {
return;
}
this.userService.login(this.loginForm.value)
.subscribe(
response => {
this.alertService.success('User Authenticated', true);
},
error => this.alertService.error(error, false)
);
}
}
解决方案
此错误是 AoT(Ahead of Time) 编译的结果。
运行“ng serve”时没有出现这些错误的原因是ng serve执行了 JiT(Just in Time)编译。
在 AoT 编译中,您必须声明每个方法/变量以及许多其他内容。
一旦你在你的 ts 上定义了缺失的变量(比如在 LoginComponent 上提交),这些错误就会消失。
推荐阅读
- r - 在 R 中进行地理编码时出现连接超时错误
- python - 在张量流中计算二阶偏导数
- python - 如何使用 Python 使用对话流 API 并制作您的自定义聊天机器人?
- python - Selenium Python:无法使用 xpath 或 css 找到 h2 元素(有和没有文本)
- php - 注销不会使会话令牌过期
- gitlab - JIRA 上的智能提交错误(JIRA 和 gitlab 集成)
- sql - 从日期集中获取日期范围间隔
- html - 使用图像进行复选框输入
- mobile - NativeScript e2e 测试 - 检查开关组件的值
- python - joblib 对 for 循环进行并行计算,得到错误:'A task has filed to un-serialize'