Как проверить наличие повторяющихся значений formcontrol в массивах форм в реактивных формах в angular5? - PullRequest
Новая
       21

Как проверить наличие повторяющихся значений formcontrol в массивах форм в реактивных формах в angular5?

0 голосов
/ 29 августа 2018

Я создаю массив форм, как 

    this.myForm= this.fb.group({
  codes: this.fb.array([])
 })

 this.codes =   this.myForm.controls['newChargecodes']

  this.codes.push(this.fb.group({
     chargeCode: ['', [Validators.required]],
  })


  addRow () {
   this.codes.push(this.fb.group({
     chargeCode: ['', [Validators.required]],
  })

  }

  Html

  <tr *ngFor="let code of myForm.get('codes').controls; let i = index;" 
              [formGroupName]="i">
               <td class="text-center">
                  <input class="form-control input-text text-center" pInputText type="text" placeholder="{{columns['chargeCode']}}" id="chargeCode"
                    formControlName="chargeCode" name="chargeCode">
                </td>
                <td>< a (click)="addRow()">+</a></td>
 </tr>

Я хочу проверить дубликат кода

пример, например, если пользователь вводит 

chargecode[0]-A1, -> true
 chargecode[1]-A2, -> true
 chargecode[2]-A1-> -> false->

показывать повторяющийся код ошибки при вводе пользователем

Пожалуйста, помогите мне, как написать пользовательскую проверку для массивов форм в реактивных формах

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

Проверьте этот рабочий раствор как:

Проверка имени повторяющегося лица здесь в примере.

DEMO

TS: 

findDuplicate(name, p): boolean {
   let myArray = this.getPeople(this.myForm);

   let test = myArray.filter(data => data.controls.name.value == name && name != null)

   if (test.length > 1) {
      return true;
   } else {
     return false
 }}

HTML: 

<form class="form-group" [formGroup]="myForm" (ngSubmit)="submit()">
    <table class="table" formArrayName="people">
        <thead class="thead bg-info">
            <tr>
                <th scope="col">People Name
                    <button (click)="addPeople()" type="button">+</button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let person of getPeople(myForm); let i=index" [formGroupName]="i">
                <td><input class="form-control" type="text" placeholder="Name" formControlName="name">
                    <p style="color:red;" *ngIf="!findDuplicate(person, i) && i > 0">Duplicate Name </p>
                </td>
            </tr>
        </tbody>
    </table>
</form>
0 голосов
/ 29 августа 2018

Эта идея может вдохновить вас на решение подобной проблемы. Статья: Валидация пользовательских групп в угловых 2

Есть живой пример Живой пример

Спасибо

0 голосов
/ 29 августа 2018

Предполагая, что вы хотите сравнить два входных значения в этой форме. в этом случае у меня есть пароль и пароли управления подтверждают пароль: 

  createForm(): void {
    this.registerForm = this.fb.group({
      password: ['', [Validators.required]],
      passwordConfirm: ['', [Validators.required, this.passwordConfirmValidator]]
    });
  }

И passwordConfirmValidator - это функция, подобная этой: 

  passwordConfirmValidator(input: FormControl) {
    const value = input.value;
    if (value === input.root.value.password) {
      return null;
    } else {
      return 'Not Equal';
    }
  }

Как видите, вы можете получить доступ к другим элементам управления формой по свойству root.

...