angular - 日期选择器和时间选择器验证

Question

我有一个事件，它有开始日期和时间、结束日期和时间。我使用了角度材料日期选择器和 NGX 时间选择器。我只对日期选择器进行了验证，因此我如何根据条件提供验证。

Answer 1

如果你在用户名中输入数据并点击提交，日期将是强制性的（验证者被解雇）。否则将被提交。

**html code:**

<h3 class="text-center">User Details</h3>
<hr>
<form [formGroup]="form" (ngSubmit)="onSubmit($event)">
  <div>
    <label for="username">Username</label>
    <input type="text" id="username" [ngClass]="{'form-submitted': formSubmitted}" formControlName="username"  placeholder="Username"/>
  </div>
  <div>
    <mat-form-field>
        <mat-label>Choose a date</mat-label>
        <input formControlName="dateValue" matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

**ts:**


import {Component,OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import {CommonModule, NgLocalization, NgLocaleLocalization} from '@angular/common'
import { IDropdownSettings } from '../../node_modules/ng-multiselect-dropdown/';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers:[{ provide: NgLocalization, useClass: NgLocaleLocalization }]
})

export class AppComponent {
    form: FormGroup;
    formSubmitted = false;
    title: any;

    constructor(private formBuilder: FormBuilder) {}
    buildForm() {
        this.form = this.formBuilder.group({
          username: [''],
          dateValue:[null],
        });
      }
      ngOnInit() {
        this.buildForm();
      }
      onSubmit(event) {
        event.preventDefault();
        this.setUserValidarors();
        if (this.form.valid) {
          console.log(this.form.value); // Process your form
        }
      }

      setUserValidarors(){
        const datecntrl=this.form.get('dateValue');
        let user=this.form.value.username;
        if(user.length>0)
        {
            datecntrl.setValidators([Validators.required]);
        }
        datecntrl.updateValueAndValidity();
      }
}