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

问题描述：

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

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验证

相关推荐