使用formControl以角度输入字段验证答案

【问题标题】：Input field validation in angular using formControl使用formControl以角度输入字段验证
【发布时间】：2018-10-22 20:53:13
【问题描述】：

我想在用户触摸该特定字段然后单击外部而不输入任何内容时标记错误消息。我不确定为什么下面的代码不起作用。
伙计们任何意见..我需要一些严肃的建议。

<form [formGroup]="personalInfoForm" novalidate [ngClass]="{submitted: formSumitAttempt}"> 
     <div class="row">
     <div class="col-lg-6">
      <label for="firstName" class="userID control-label">First Name</label>

                <input type="text" class="form-control" id="firstName" placeholder="Name" formControlName="firstName"  [(ngModel)]="firstName"  required>
                <div *ngIf ="firstName?.touched && firstName?.errors" class="alert alert-danger">
                    <div [hidden]="!firstName.errors.required">
                        Name is required
                    </div>
                    </div></div></div>

【问题讨论】：

要读的东西：angular.io/guide/form-validation#reactive-form-validation。我认为你不能同时使用formControlName 和ngModel。
虽然现在我已经从我的代码中删除了 ngModel，但仍然没有标记错误消息。
或者，如果我使用下面的代码，我会收到错误，“TypeError: Cannot read property 'invalid' of undefined”

名称是必需的。
删除formControlName，使用<input id="firstName" name="firstName" class="form-control" placeholder="Name" [(ngModel)]="firstName" required> 然后，使用带有firstName.dirty的那个
@JoshuaChanERROR 错误：ngModel 不能用于使用父 formGroup 指令注册表单控件。尝试改用 formGroup 的合作伙伴指令“formControlName”。示例：

在您的班级中： this.myGroup = new FormGroup({ firstName: new FormControl() });或者，如果您想避免注册此表单控件，请在 ngModelOptions 中指明它是独立的：

标签： angular validation input

【解决方案1】：

在你的组件中

personalInfoForm=new formGroup({
 firstname:new FormControl('',[Validators.required])
})

你的 HTML

<form [formGroup]="personalInfoForm" novalidate [ngClass]="{submitted: formSumitAttempt}"> 
     <div class="row">
     <div class="col-lg-6">
      <label for="firstName" class="userID control-label">First Name</label>

<input type="text" class="form-control" id="firstName" placeholder="Name" formControlName="firstName"   required>
                <div *ngIf ="personalInfoForm.controls['firstname'].hasError('required')" class="alert alert-danger">
 Name is required </div>
</div></div>

【讨论】：

ERROR TypeError: Cannot read property 'hasError' of undefined
现在检查有一个错字我已更正
实际上下面的代码有效。不确定，为什么你给出的代码会抛出错误:( ..我试图从你给出的代码中稍微修改一下，它可以工作
@RajeshAny 知道如何在我单击提交按钮并且 firstName 字段没有输入任何值时将错误消息标记到该特定字段。