我正在使用 Angular 4(反应式表单)处理表单,我的问题是我无法单独显示电子邮件地址字段的错误消息。
我正在尝试这种格式,但没有运气。
<div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf="name.errors.forbiddenName">
Name cannot be Bob.
</div>
这是我的示例代码
注册组件.ts
constructor(private fb: FormBuilder) {
this.rForm = fb.group({
'account': [null, Validators.required],
'company': [null, Validators.required],
'website': '',
'email': [null, Validators.compose([Validators.email, Validators.required])],
'phone': [null, Validators.required],
})
}
register.component.html
<div class="col-md-6">
<label>Email Address</label>
<input type="email" name="email" class="form-control" formControlName = "email">
<span class="text-danger" *ngIf="!rForm.controls['email'].valid && rForm.controls['email'].touched">This field is required. Please provide a valid email address.</span>
谢谢。