html - 角6 | 禁用隐藏字段的表单验证
问题描述
背景
我有一个表格,让用户可以选择指定快速时间范围或详细时间范围(具有特定的开始/结束时间) - 即用户可以选择仅填写两者中的一个
他们希望选择的选项类型可以通过单击按钮来切换。这些按钮只是在指定的 div 上切换隐藏参数
问题
我的问题是,这两个字段(从技术上讲,所有 3 个作为开始/结束时间都是一个通用 div 下的 2 个单独的表单组 div)只有在它们没有被隐藏的情况下才需要- 我不确定如何使用 Angular 4 来实现/5/6(这里使用 6)
我的无效表单触发器总是关闭,因为还需要隐藏字段
我的表格
<div class="card-block">
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<div class="form-group">
<label for="transactionType"> Request Type </label>
<select
class="form-control"
[(ngModel)]=data.transactionType
name ="transactionType"
#transactionType="ngModel"
required>
<option value="something1Count">Something1</option>
<option value="something2Count">Something2</option>
</select>
<div *ngIf="transactionType.errors?.required && transactionType.touched" class="alert alert-danger">
Please select a transaction type
</div>
</div>
<br>
<div class="form-group">
<label>Timeframe Type</label>
<br>
<button type="button" class="btn btn-light" (click)="quickTimeframe = false; detailedTimeframe = true;" ng-selected="!quickTimeFrame"> Quick </button>
<button type="button" class="btn btn-light" (click)="detailedTimeframe = false; quickTimeframe = true;" ng-selected="!detailedTimeframe"> Detailed </button>
</div>
<div class="form-group" [hidden]="quickTimeframe">
<label for="timeframe">Timeframe</label>
<select
class="form-control"
[(ngModel)]=data.timeframe
name ="timeframe"
#timeframe="ngModel"
required>
<option value="15">15 Minutes</option>
<option value="30">30 Minutes</option>
<option value="45">45 Minutes</option>
<option value="60">60 Minutes</option>
</select>
<div *ngIf=" !quickTimeframe && timeframe.errors?.required && timeframe.touched" class="alert alert-danger">
Please select a timeframe
</div>
</div>
<div class="detailed" [hidden]="detailedTimeframe">
<div class="form-group">
<label for="startTime">Start of Time Range</label>
<input
type="datetime-local"
class="form-control"
[(ngModel)]="data.startTime"
#startTime="ngModel"
name="startTime"
required
>
<div *ngIf="!detailedTimeframe && startTime.errors?.required && startTime.touched" class="alert alert-danger">
Please select a start-time
</div>
</div>
<div class="form-group">
<label for="endTime">End of Time Range</label>
<input
type="datetime-local"
class="form-control"
[(ngModel)]="data.endTime"
#endTime="ngModel"
name="endTime"
required
>
<div *ngIf="!detailedTimeframe && endTime.errors?.required && endTime.touched" class="alert alert-danger">
Please select an end-time
</div>
</div>
</div>
<input type="submit" class="btn btn-primary btn-block" value="Submit">
</form>
</div>
</div>
TS 文件
import { Component, OnInit } from '@angular/core';
import { Inputs } from '../../models/Inputs';
import { Router } from '@angular/router';
import {FlashMessagesService} from 'angular2-flash-messages';
@Component({
selector: 'app-main-form',
templateUrl: './main-form.component.html',
styleUrls: ['./main-form.component.css']
})
export class MainFormComponent implements OnInit {
data:Inputs = {
transactionType:'',
timeframe:null,
startTime:'',
endTime:''
};
quickTimeframe:boolean=true;
detailedTimeframe:boolean=true;
buttonResult:any;
constructor(public router:Router, public flashMessagesService:FlashMessagesService) {
}
ngOnInit() {
}
onSubmit({value, valid}:{value:Inputs, valid:boolean}){
console.log("Quick Time Flag: " +this.quickTimeframe);
console.log("Detailed Time Flag: " +this.detailedTimeframe);
if (valid && !this.quickTimeframe){
console.log("Form is valid");
//Stuff should happen
console.log(value);
} else if (valid && !this.detailedTimeframe) {
console.log(this.data.startTime);
//Other stuff should happen
}
else {
console.log("Form is not valid");
this.flashMessagesService.show('Choose Valid Parameters', {cssClass:'alert-danger', timeout: 4000});
}
}
radioClick() {
console.log(this.buttonResult);
}
}
报告输入接口(为了完成)
export interface Inputs {
transactionType?:string;
timeframe?:number;
startTime?:string;
endTime?:string;
}
解决方案
*ngIf 成功了
使用 ngIf 而不是 hidden 确保元素在我的场景中不存在于表单中
推荐阅读
- gdscript - 无法在 gdscript 中添加相机旋转
- javascript - 滑块动画
- javascript - 通过css从另一个元素设置高度
- jquery - 休眠选择新地图的原因
- php - 如何在php中动态创建if
- automation - 当心率高于某个水平时自动打开 LED - HomeAssistant
- math - 是否有一个公式来比较两个数字序列以确定一个数字是否重合/重叠?
- build - 使用 Azure DevOps 和 git 有条件地将标记添加到合并提交
- c# - C# 泛型集合:在公共属性中使用它们而不使类泛型
- python - 如何在Python中每5个元素减去两个列表?