angular - Angular 5 无法读取未定义的属性“删除”
问题描述
所以,我一直在努力进入 ASP.NET Core 2 和 Angular 5(我是 Django/Rails Vue 人),在做了一些琐碎的例子之后,我决定用新堆栈构建我的旧产品之一. 问题是我无法找出这个错误的根源。
这是我的登录组件模板:
<div class="login-container">
<h2 class="login-title">{{title}}</h2>
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-horizontal">
<div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Username')}">
<input type="text" formControlName="Username" class="form-control" required placeholder="Usuario o Email" />
</div>
<div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Password')}">
<input type="password" formControlName="Password" class="form-control" required placeholder="*****" />
</div>
<button type="submit" [disabled]="form.invalid" class="btn btn-md btn-success">Entrar</button>
</form>
</div>
这是打字稿:
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
title: string;
form: FormGroup;
constructor(private router: Router,
private fb: FormBuilder,
private authService: AuthService,
@Inject('BASE_URL') private baseUrl: string) {
this.title = 'Entrar';
}
ngOnInit(): void {
this.createForm();
}
createForm() {
this.form = this.fb.group({
Username: ['', Validators.required],
Password: ['', Validators.required]
});
console.log(this.form);
}
onBack() {
this.router.navigate(['home']);
}
getFormControl(name: string) {
return this.form.get(name);
}
isValid(name: string) {
const e = this.getFormControl(name);
return e && e.valid;
}
isChanged(name: string) {
const e = this.getFormControl(name);
return e && (e.dirty || e.touched);
}
hasErrors(name) {
return this.isChanged(name) && !this.isValid(name);
}
onSubmit() {
const url = this.baseUrl + 'api/token/auth';
const username = this.form.value.Username;
const password = this.form.value.Password;
this.authService.login(username, password)
.subscribe(res => this.router.navigate(['home']),
err => this.form.setErrors({ 'auth': 'Usuario o password incorrecto' }));
}
}
我在 SO 中阅读了类似的问题,但最终决定发布此内容,因为:
- 据我所知,我的模板中没有任何内容
undefined
(我认为这里唯一的绑定是form
) - 我没有打电话/读任何有名字
remove
的东西。
提前致谢。
解决方案
[ngClass]
意外添加到时我遇到了同样的错误<ng-container />
推荐阅读
- javascript - 在javascript中对多个字段进行排序
- css - 覆盖完整页面未正确显示
- javascript - 如何正确处理按钮的右键单击鼠标事件
- javascript - 可以在减速器状态上设置计时器吗?反应 + 还原
- amazon-web-services - AWS Pfsense OpenVPN 无法访问私有子网
- virtual-machine - 从主机连接到 Minishift VM (Windows)
- allen-sdk - 通过 MNI 坐标提取微阵列数据
- ruby-on-rails - RailsAdmin - 导出操作
- docker - 成功安装后 Livemedia-creator 退出并出现“NoneType”错误
- python - 无法通过 pandas read_excel 获取 excel 公式的值,除非再次手动保存文件