关于酒店设施开放时间和关闭时间的 Angular 2 验证答案

【问题标题】：Angular 2 validation on Hotel Amenity Open Time and Close Time关于酒店设施开放时间和关闭时间的 Angular 2 验证
【发布时间】：2017-11-16 07:42:40
【问题描述】：

我是 Angular 新手，所以需要一些帮助。我有两个领域的酒店设施的开放和关闭时间。没有这样的验证。在用户不选择任何一个字段之前，它必须通过验证，但如果用户选择其中任何一个，则用户还必须选择另一个字段，反之亦然。

这是.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)*[^<>\/])*[^<>\/ ]+$')])],
});

【问题讨论】：

标签： angular

【解决方案1】：

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

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;
    }

然后，当您定义表单构建器时

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

【讨论】：