关于酒店便利设施的开放时间和关闭时间的Angular 2验证 [英] Angular 2 validation on Hotel Amenity Open Time and Close Time

问题描述

我刚开始接触棱角，因此需要一些帮助.我有两个领域的酒店设施开放和关闭时间.没有这样的验证.在用户没有选择任何内容之前，它必须通过验证，但是如果用户选择其中任何一个，则用户还必须选择另一个字段，反之亦然.

I am new to angular, so need some help. I have two fields open and close time of hotel amenities. There is no validation as such. Until user select none of them it must pass the validation but if user select any of them, then user must select another field also and vice verse.

这是.html代码

<div class="form-group row">
     <div class="col-sm-3 col-sm-offset-1" [ngClass]="{'has-error':!addHotelMappingAmenities.controls['open_time'].valid && (addHotelMappingAmenities.controls['open_time'].dirty || addHotelMappingAmenities.controls['open_time'].touched)}">
            <div class="form-material">
              <label for="amenity-edit-opens">Opens at</label>
              <div id='amenity-edit-opens' class='input-group date'>
                <input formControlName="open_time" type='text' class="form-control" id="open_add_amenity" />
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-time"></span>
                </span>
              </div>
            </div>
            <div [ngClass]="{'help-block animated fadeInDown':addHotelMappingAmenities.controls['open_time'].hasError('required') && addHotelMappingAmenities.controls['open_time'].touched}" *ngIf="addHotelMappingAmenities.controls['open_time'].hasError('required') && addHotelMappingAmenities.controls['open_time'].touched">Please select open at.</div>
          </div>
          <div class="col-sm-3" [ngClass]="{'has-error':!addHotelMappingAmenities.controls['close_time'].valid && (addHotelMappingAmenities.controls['close_time'].dirty || addHotelMappingAmenities.controls['close_time'].touched)}">
            <div class="form-material">
              <label for="amenity-edit-closes">Closes at</label>
              <div id="amenity-edit-closes" class='input-group date'>
                <input formControlName="close_time" type='text' class="form-control" id="close_add_amenity" />
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-time"></span>
                </span>
              </div>
            </div>
            <div [ngClass]="{'help-block animated fadeInDown':addHotelMappingAmenities.controls['close_time'].hasError('required') && addHotelMappingAmenities.controls['close_time'].touched}" *ngIf="addHotelMappingAmenities.controls['close_time'].hasError('required') && addHotelMappingAmenities.controls['close_time'].touched">Please select Close at.</div>
          </div>
        </div>

.ts代码在这里

this.addHotelMappingAmenities = this.formBuilder.group({
      hotel_id: [''],
      title: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(30), Validators.pattern("^([a-zA-Z0-9!@#$%^&*()'?.,|-]+\\s)*[a-zA-Z0-9!@#$%^&*()'?.,|-]+$")])],
      contact_number: ['', Validators.required],
      open_time: [''],
      close_time: [''],
      type: ['', Validators.required],
      image: [''],
      description: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(1000), Validators.pattern('^[^ <>\/](([a-zA-Z]+\s)*[^<>\/])*[^<>\/ ]+$')])],
});  

推荐答案

您始终可以对所有表单使用customValidator

You always can use a customValidator about all the form

customValidator(openTimeKey: string, closeTimeKey: string) {
    return (group: FormGroup): { [key: string]: any } | null => {
      let openTime: number = group.controls[openTimeKey].value;
      let closeTime: number = group.controls[closeTimeKey].value;
      let errorExist=(openTime && !closeTime) || (!openTime && closeTime);
      return errorExist?{error:'must choosen two or none"}:null;
    }

然后，当您定义表单生成器时

then, when you define the form builder

this.addHotelMappingAmenities = this.formBuilder.group({
      hotel_id: [''],
      ...
      },{ validator: this.customValidator('openTime', 'closeTime') }); 

这篇关于关于酒店便利设施的开放时间和关闭时间的Angular 2验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！