- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
目前,我正在研究 Maximilian Schwarzmüller Angular 4 教程中的响应式(Reactive)作业。在作业中,我必须创建一个响应式表单,而我做到了。然后我必须创建一个自定义异步验证器,用于检查控件的值。它不应该等于“测试”。这是我的 typescript 代码:
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
statuses = ['Stable', 'Critical', 'Finished'];
signupForm: FormGroup;
ngOnInit() {
this.signupForm = new FormGroup({
'projectName': new FormControl(null, [Validators.required], this.forbiddenName),
'email': new FormControl(null, [Validators.required, Validators.email]),
'projectStatus': new FormControl('Stable')
});
}
onSubmit() {
console.log(this.signupForm.value);
console.log(this.signupForm);
}
forbiddenName(control: FormControl): Promise<any> | Observable<any> {
const promise = new Promise<any>((resolve, reject) => {
setTimeout(() => {
if (control.value === 'Test') {
resolve({'projectNameIsForbidden': true});
} else {
resolve(null);
}
}, 2000);
});
return promise;
}
}
这是我的 html:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="project-name">Project name</label>
<input type="text" id="project-name" class="form-control" formControlName="projectName">
<div class="help-block" *ngIf="!signupForm.get('projectName').valid && signupForm.get('projectName').touched">
<span *ngIf="signupForm.get('projectName').errors['required']">Can't be empty!<br></span>
<span *ngIf="signupForm.get('projectName').errors['projectNameIsForbidden']">This name is forbidden!</span>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" class="form-control" formControlName="email">
<div class="help-block" *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched">
<span *ngIf="signupForm.get('email').errors['required']">Can't be blank!<br></span>
<span *ngIf="signupForm.get('email').errors['email']">Has invalid format!</span>
</div>
</div>
<div class="form-group">
<label for="project-status">Project Status</label>
<select id="project-status" class="form-control" formControlName="projectStatus">
<option *ngFor="let status of statuses">{{ status }}</option>
</select>
</div>
<button class="btn btn-success" type="submit">Submit</button>
</form>
</div>
</div>
</div>
它似乎工作正常,它在我的 View 中为我提供了相应的错误消息,但在控制台中,我在 projectName
控件中的每个按键上都收到错误消息。这是错误:
那么,为什么会出现这个错误呢?先谢谢了。
最佳答案
错误原因在这里:
<span *ngIf="signupForm.get('projectName').errors['required']">
Can't be empty!
</span>
当您输入 errors
时,null
将变为 null
,如果您在异步验证器完成评估之前从字段中移出,errors
将为 null
,因此 Angular 无法读取它。这可以使用安全导航运算符来解决:
<span *ngIf="signupForm.get('projectName').errors?.required">
但由于我更喜欢显示消息使用的是 hasError
,因此我会将两个验证改为:
<span *ngIf="signupForm.hasError('projectNameIsForbidden', 'projectName')">
<span *ngIf="signupForm.hasError('required', 'projectName')">
关于angular - 异步自定义验证导致控制台错误 : "Cannot read property ' required' of null at Object. eval [as updateDirectives]”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45431489/
您好,下面是我在 AWS 中创建启用了弹性 IP 的实例的模板。但是我不确定我哪里出错了。我已经通过在线 json 验证器验证了 json,仍然面临问题请帮忙 { "AWSTemplateForm
标题有点乱,但已经说明了一切。我想在一个属性的属性上有一个属性观察器: class A { var b: B init() { b = B() } fu
假设我的一个 Controller 中有这样的方法: [Route("api/Products")] public IQueryable GetProducts() { return db.P
这有效: // @flow import React, {Component} from 'react'; type Props = {}; class Delete extends Componen
我有一个 ViewModelBase 类,我在其中为 INotifyPropertyChanged 接口(interface)定义了 RaisePropertyChanged 方法。大多数 MVVM
我创建了类: class StorageBase { public Queue Slices {get;set;} } 和 wpf 自定义控件,它具有 StorageBase 类型的依赖属性
我的 java 应用程序问题是 log4j2 系统日志不是写在 'local1.log' 中而是'消息'。我的/etc/rsyslog.conf 在/etc/rsyslog.conf 中配置为 'lo
为什么需要在对象中使用 this.property = property ?它是用来定义对象的“外部世界”的属性吗? function Person(property) { this.property
摘要: 这个问题是关于属性的继承与从彼此继承属性的类的内部和外部的不同读/写访问相结合。 详细信息: 我有一个类 A 和另一个继承自 A 的类 B。 A 中声明了属性someProperty。我希望该
我正在开发 ASP.NET MVC 应用,设计域模型,使用(测试)新的 EF Code First 功能。 我有一个可能有也可能没有截止日期的事件实体,处理它的最佳方法是什么? 1 个属性: publ
我在配置项目时经常使用它们,但大多数情况下都是按照指示添加 fragment 。我完全不知道哪个文件到底是做什么的。谁能清楚地说明每个文件的用途。 到目前为止我认为 local.properties
在运行 python 文件以使用 rasa nlu 训练文件时,我在命令提示符下收到此错误 我目前正在使用 Windows 10 rasa_core==0.8.2 rasa_nlu==0.11.4 p
我在这方面遇到了一些麻烦,尽管我已经搜索了答案,但还是找不到。 为了使用 AsyncAppender,我看到了很多不同的 log4j 配置,无论如何,它们都与 .properties 配置文件无关。
我正在编写一个 Python 类,并使用 @property 装饰器为该类创建属性。 我在文档中没有找到太多关于这个装饰器的信息,但是从我可以从 Stack Overflow 和我的 Python l
在 gradle 任务中,我可以创建这样的路径: System.env.FOLDER_PATH + '/subFolder' 但我想在我的 gradle.properties 中设置它,所以它会像 s
如何在属性文件的 log4j2 中创建键值对? 我知道在 log4j 版本 1 中它是这样完成的: log4j.appender.x.additionalFields={'key': 'value'}
我想通了 struct PropertyTest { @property int x() { return val; } @property void x( int newVal )
我有 REST (Jersey) webservice,它利用了一些编码/解码到/来自 XML 的数据对象。数据对象位于 webservice war 所依赖的单独项目/jar 中。 我使用 MOXy
我正在创建一个 LinkedList 类: function LinkedList(){ ... 有什么区别: this.addNode = function(data){
关于语义的快速问题:) 如果我正在编写一个协议(protocol),这是首选: // (a) @protocol MyProtocol @property (nonatomic, copy) NSSe
我是一名优秀的程序员,十分优秀!