Angular 4 - Reactive Forms - 模糊一个字段将所有字段突出显示为红色
Angular 4 - Reactive Forms - Blurring one field highlights all fields as red
对于上下文,这是我的表格:
this.commentForm = this.fb.group(
{
commentId: [''],
commentType: ['', ExistsWithinList(this.commentTypes)],
commodity: ['', ExistsWithinList(this.commodities)],
title: ['', Validators.required],
description: ['', Validators.required],
dealerId: ['', Validators.required],
operator: ['', Validators.required]
},
{
updateOn: 'submit'
}
);
模板:
<form [formGroup]="commentForm" (ngSubmit)="submitForm()">
<div class="row">
<div class="col-lg-6">
<label for="title">Title</label>
<input type="text" id="title" class="form-control" formControlName="title" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3">
<label for="commentType">Issue Type</label>
<select class="form-control" id="commentType" formControlName="commentType">
<option value="">--Select Type--</option>
<option *ngFor="let commentType of commentTypes">{{ commentType }}</option>
</select>
</div>
<div class="col-sm-3">
<label for="commodity">Commodity</label>
<select class="form-control" id="commodity" formControlName="commodity">
<option value="">--Select Commodity--</option>
<option *ngFor="let commodity of commodities">{{ commodity }}</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-12">
<label for="description">Description</label>
<textarea rows="10" class="form-control" formControlName="description" id="description">
</textarea>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2">
<span *ngIf="dealerCommentCreation; else updateSubmitButtonBlock">
<input type="submit" class="btn btn-primary" value="Report" />
</span>
<ng-template #updateSubmitButtonBlock>
<input type="submit" class="btn btn-primary" value="Update" />
</ng-template>
</div>
</div>
</form>
当我专注于这些字段中的任何一个,然后模糊一个字段时,所有带有 'Validators.required' 的字段都突出显示为红色(尽管在过去,Angular 的较新版本,仅一个字段突出显示红色)
很遗憾,我无法显示实际页面(由于保密协议)。
一段相关的 Angular 依赖项(在 package.json 中):
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/forms": "4.4.6",
"@angular/http": "4.4.6",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
更新——所以,经过进一步调查,我意识到 Angular 4 的 Reactive Forms 还不支持 'updateOn' 属性(这是 Angular 5+ 可用的功能)
可能还有其他方法可以更新表单的验证状态(使用 Angular 4),但由于时间限制,我迁移到基于模板的解决方案——大多数表单已经在此建立应用程序是基于模板的,保持我们的表单一致让我更有理由进行转换。
不过,我要说的是,我更喜欢响应式表单,因为它们使自定义/异步验证更加清晰(和无缝)。
对于上下文,这是我的表格:
this.commentForm = this.fb.group(
{
commentId: [''],
commentType: ['', ExistsWithinList(this.commentTypes)],
commodity: ['', ExistsWithinList(this.commodities)],
title: ['', Validators.required],
description: ['', Validators.required],
dealerId: ['', Validators.required],
operator: ['', Validators.required]
},
{
updateOn: 'submit'
}
);
模板:
<form [formGroup]="commentForm" (ngSubmit)="submitForm()">
<div class="row">
<div class="col-lg-6">
<label for="title">Title</label>
<input type="text" id="title" class="form-control" formControlName="title" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3">
<label for="commentType">Issue Type</label>
<select class="form-control" id="commentType" formControlName="commentType">
<option value="">--Select Type--</option>
<option *ngFor="let commentType of commentTypes">{{ commentType }}</option>
</select>
</div>
<div class="col-sm-3">
<label for="commodity">Commodity</label>
<select class="form-control" id="commodity" formControlName="commodity">
<option value="">--Select Commodity--</option>
<option *ngFor="let commodity of commodities">{{ commodity }}</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-12">
<label for="description">Description</label>
<textarea rows="10" class="form-control" formControlName="description" id="description">
</textarea>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-2">
<span *ngIf="dealerCommentCreation; else updateSubmitButtonBlock">
<input type="submit" class="btn btn-primary" value="Report" />
</span>
<ng-template #updateSubmitButtonBlock>
<input type="submit" class="btn btn-primary" value="Update" />
</ng-template>
</div>
</div>
</form>
当我专注于这些字段中的任何一个,然后模糊一个字段时,所有带有 'Validators.required' 的字段都突出显示为红色(尽管在过去,Angular 的较新版本,仅一个字段突出显示红色)
很遗憾,我无法显示实际页面(由于保密协议)。
一段相关的 Angular 依赖项(在 package.json 中):
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/forms": "4.4.6",
"@angular/http": "4.4.6",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
更新——所以,经过进一步调查,我意识到 Angular 4 的 Reactive Forms 还不支持 'updateOn' 属性(这是 Angular 5+ 可用的功能)
可能还有其他方法可以更新表单的验证状态(使用 Angular 4),但由于时间限制,我迁移到基于模板的解决方案——大多数表单已经在此建立应用程序是基于模板的,保持我们的表单一致让我更有理由进行转换。
不过,我要说的是,我更喜欢响应式表单,因为它们使自定义/异步验证更加清晰(和无缝)。