Библиотека Angular 7 и RxWebValidators Добавление условных валидаторов отключает кнопку добавления - PullRequest
Новая
       24

Библиотека Angular 7 и RxWebValidators Добавление условных валидаторов отключает кнопку добавления

0 голосов
/ 14 ноября 2018

ihave 3 элемента управления реактивными формами:

  1. Первое - это имя элемента управления u_id, которое должно иметь следующую форму: ADD-DDCDDDDD, и эта проверка работает должным образом;
  2. Второй - выданный правительством идентификатор
  3. Третье число - номер этого идентификатора правительства

Я использую библиотеку RxWebValidators для создания условных валидаторов.

Если пользователь не введет свой собственный u_id, кнопка сохранения будет отключена, пока, по крайней мере, он не добавит тип идентификатора правительства (паспорт или персональный идентификатор) и, конечно, следует добавить номер этого идентификатора.тоже.

А если пользователь ввел u_id, он может пропустить часть идентификатора правительства и кнопка будет отключена.

Вот сценарий: 

import { Component, OnInit } from '@angular/core';
import { RxwebValidators } from "@rxweb/reactive-form-validators"
import { FormBuilder, FormGroup, Validators, FormControl } from "@angular/forms"
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  userForm: FormGroup

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.userForm = this.formBuilder.group({
      'u_id': new FormControl('', [Validators.minLength(12), RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type === '' && x.gov_id_number === '' }), RxwebValidators.pattern({ pattern: { 'unid': RegExp('^[0-9A-Z]{3}(-)[0-9]{2}(C)[0-9]{5}$') }, conditionalExpression: (x) => x.u_id !== '' })]),

      'gov_id_type': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.u_id === '' })),

      'gov_id_number': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type !== '' }))
    })
  }

}

И html-скрипт: 

<div>
    <div class="container">
        <main class="col-12">
            <h3 class="bd-title" id="content">Conditional Required Validator
            </h3>
            <br>
<form  [formGroup]="userForm">
  <div class="form-group">
    <input type="text" formControlName="u_id" placeholder="UID" class="form-control"  />
</div>
<div class="form-group">
<select id="gov_id_type" formControlName="gov_id_type" placeholder="Gov. ID Type" class="form-control">
  <option value="passport">PassPort</option>
  <option value="personal_id">Personal ID</option>
</select>
        <input matInput id="gov_id_number" formControlName="gov_id_number" placeholder="Gov. ID Number" class="form-control"/>

</div>
<button matButton color="warn" [disabled]="!userForm.valid">
        Save Data
</button>
</form></main></div>

И stackblitz для проверки.

Кнопка всегда отключена, и валидаторы не работают

1 Ответ

0 голосов
/ 14 ноября 2018

@ alim1990

В рабочем образце stackblitz возникла проблема formcontrol соглашения об именах имен.это должно быть u_id , и вы упомянули как un_id в файле component.ts

Ниже обновленный код ngOnInit: 

ngOnInit() {
this.userForm = this.formBuilder.group({
  'u_id': new FormControl('', [RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type === '' && x.gov_id_number === '' }), 
  RxwebValidators.pattern({ pattern: { 'unid': RegExp('^[0-9A-Z]{3}(-)[0-9]{2}(C)[0-9]{5}$') }, conditionalExpression: (x) => x.u_id !== '' })]),

  'gov_id_type': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.u_id === '' })),

  'gov_id_number': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type !== '' }))
})
 }

}

Пожалуйста, используйтепоследняя версия @ rxweb / реактивная форма-валидаторы - 1.3.3.

Пожалуйста, проверьте ссылку ниже для рабочего решения. условно обязательный валидатор

...