как проверить адрес сайта с помощью угловых 5 - PullRequest
Новая
       23

как проверить адрес сайта с помощью угловых 5

0 голосов
/ 04 марта 2019

Я хотел бы проверить URL в угловых 5 не работает. 

<input type="url" name="url" id="url" ngModel pattern="https?://.+">
<div *ngIf="url.errors && (url.dirty || url.touched)" class="alert alert-danger">

  <div [hidden]="!url.errors.pattern">
  </div>
</div>

1 Ответ

0 голосов
/ 04 марта 2019

Чтобы проверить URL / веб-адрес в реактивной форме, вы можете использовать следующий метод, используя Validators.pattern против элемента управления формы. 

const urlRegex = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';

 this.hospitalForm = this.fb.group({
   Website: ['', Validators.pattern(urlRegex)],
 });

Чтобы проверить URL / веб-адрес в управляемом шаблонеформа, вы должны создать пользовательскую директиву Validator следующим образом: 

@Directive({
  selector: '[appPattern]',
  providers: [{provide: NG_VALIDATORS, useExisting: PatternValidatorDirective, multi: true}]
})
export class PatternValidatorDirective implements Validator {
  @Input('appPattern') pattern: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    return this.pattern ? this.patternValidator(new RegExp(this.pattern, 'i'))(control)
                              : null;
  }

 patternValidator(nameRe: RegExp): ValidatorFn {
   return (control: AbstractControl): {[key: string]: any} | null => {
           const regextest = nameRe.test(control.value);
           return (!regextest) ? {'apppattern': {value: control.value}} : null;
   };
  }
}

. Для ввода вы должны использовать appUrl с регулярным выражением: 

<input  type="url" name="url" id="url" ngModel appPattern="(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?">
...