角度6 |禁用隐藏字段的表单验证

Question

背景

我有一个表格，我让用户可以选择指定快速时间范围或详细时间范围（具有特定 start/end 时间） - 即用户可以选择填写只有二选一

他们希望选择的选项类型可以通过单击按钮来切换。这些按钮只是在指定的 divs

上切换隐藏参数

问题

我的问题是这两个字段（技术上所有 3 个 start/end 时间都是 2 个单独的表格组 divs 在一个广义 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;

}

Answer 1

*ngIf 成功了

使用 ngIf 而不是 hidden 确保元素不存在于我的场景中的表单中

角度6 |禁用隐藏字段的表单验证

Angular6 | Disable form validation for hidden fields

html

forms

validation

hidden-field

angular