forms - 根据角度 5 中的另一个字段值使表单字段成为必需
问题描述
我有以下表格。我想让图形类型成为强制性的。但是,只有当图形是条形图或折线图而不是饼图或圆环图时,才应强制设置 X 和 Y 轴值。根据我的代码,X 轴和 Y 轴值始终是强制性的。请帮忙。
html
<form [formGroup]="clientForm" (ngSubmit)="clientForm.valid && changeGraph()" #formLogin="ngForm">
<div class="form-group">
<label> Graph Type </label>
<select class="form-control" formControlName="type">
<option disabled [ngValue]="null"> Select Option </option>
<option *ngFor='let t of types' [ngValue]="t"> {{t}} </option>
</select>
<div class="form-err" *ngIf="(clientForm.controls['type'].hasError('required') && clientForm.controls['type'].touched) || (clientForm.controls['type'].hasError('required') && formLogin.submitted)"> Please enter Graph Type </div>
</div>
<div class="form-group">
<label> X-Axis </label>
<select class="form-control" formControlName="xAxis">
<option disabled [ngValue]="null"> Select Option </option>
<option *ngFor='let dim of dimensions?.data' [ngValue]="dim"> {{dim}} </option>
</select>
<div class="form-err" *ngIf="(clientForm.controls['xAxis'].hasError('required') && clientForm.controls['xAxis'].touched) || (clientForm.controls['xAxis'].hasError('required') && formLogin.submitted)"> Please enter Dimension </div>
</div>
<div class="form-group">
<label> Y-Axis </label>
<select class="form-control" formControlName="yAxis">
<option disabled [ngValue]="null"> Select Option </option>
<option *ngFor='let dim of dimensions?.data' [ngValue]="dim"> {{dim}} </option>
</select>
<div class="form-err" *ngIf="(clientForm.controls['yAxis'].hasError('required') && clientForm.controls['yAxis'].touched) || (clientForm.controls['yAxis'].hasError('required') && formLogin.submitted)"> Please enter Measure </div>
</div>
<button class="client-side-window-btn" type="submit">
Save
</button>
</form>
ts
import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, FormsModule } from '@angular/forms';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
//Form params
clientForm: FormGroup;
type:FormControl;
xAxis:FormControl;
yAxis:FormControl;
//dropdown arrays
public dimensions:string[]= ['Plant','Year','Month'];
public types: string[]= ['bar','line','pie','doughnut'];
constructor(
private form:FormBuilder,
private forms:FormsModule) {
}
ngOnInit() {
this.clientForm = this.form.group({
'type': [null, Validators.required],
'xAxis': [null, Validators.required],
'yAxis': [null, Validators.required],
});
}
}
解决方案
用(change)="callback()"
你可以触发一个功能。然后formControl.setValidators()
你可以设置验证器。
编辑
您还需要formControl.updateValueAndValidity()
实际触发验证。
请注意,您无法读取当前的验证器(实际上它是可能的,但有点棘手),而只能覆盖它们。
html
<select (change)="updateAxisFields()" class="form-control" formControlName="type">
<option disabled [ngValue]="null"> Select Option </option>
<option *ngFor='let t of types' [ngValue]="t"> {{t}} </option>
</select>
ts
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.css']
})
export class ClientComponent implements OnInit {
//Form params
optional: string[] = ['pie', 'doughnut'];
clientForm: FormGroup;
type:FormControl;
xAxis:FormControl;
yAxis:FormControl;
//dropdown arrays
public dimensions:string[]= ['Plant','Year','Month'];
public types: string[]= ['bar','line','pie','doughnut'];
constructor(
private form:FormBuilder,
private forms:FormsModule) {
}
ngOnInit() {
this.clientForm = this.form.group({
'type': [null, Validators.required],
'xAxis': [null, Validators.required],
'yAxis': [null, Validators.required],
});
}
updateAxisFields(): void {
console.info("updateAxis");
const type = this.clientForm.controls.type.value;
const xAxis = this.clientForm.controls.xAxis;
const yAxis = this.clientForm.controls.yAxis;
const newValidators = [];
this.axisRequired = this.optional.indexOf(type) > -1
if (this.axisRequired) {
newValidators.push(Validators.required);
}
xAxis.setValidators(newValidators);
xAxis.updateValueAndValidity();
yAxis.setValidators(newValidators);
yAxis.updateValueAndValidity();
}
}
推荐阅读
- univocity - Univocity - 多次读取期间文件头验证的问题
- excel - 将 Excel 电子表格转换为 XML
- python - Hydrogen - Python 3 没有内核
- c# - c# 客户端和服务器之间的套接字消息
- html - 如何使用 Excel 电子表格数据库创建动态网页?
- python - 在 Python 中使用 BeautifulSoup 提取表标签值?
- python - ImportError:导入 urllib.error 时没有模块命名错误
- java - 如何在 Java 中运行 groovy
- gulp - 为什么 gulp watch 连续输出starting\finished到终端
- java - 主机上的 Docker DNS 解析速度很慢