Валидатор повторяющихся массивов в FormArray в Реактивной форме в угловых - PullRequest
Новая
       34

Валидатор повторяющихся массивов в FormArray в Реактивной форме в угловых

0 голосов
/ 10 февраля 2019

Я добавляю Alias onclick метода addInputs (), в основном добавляю новое поле ввода текста с некоторыми условиями.

Для этого я пытаюсь создать custom duplicate array validator directive (синхронный или асинхронный formArrayвалидатор).Это означает, что Alias formArray должен проверять текст в текущем вводе с другими элементами в Alias formArray.Если дубликатов нет, добавьте новый ввод, иначе предупреждайте дублирующийся текст;

alias = ['abc', 'abc'] <--- если введенный текст совпадает с другими, проверка не удалась. </p>

.ts 

    export class AppComponent implements OnInit {
        profileForm: FormGroup;
        aliaseS: FormArray;
        myInputs: FormArray;

        constructor(
            private formbuilder: FormBuilder
        ) {
            this.profileForm = this.formbuilder.group({
                firstName: ['', Validators.required],
                lastName: [''],
                contact: this.formbuilder.group({
                    mobileNo: [''],
                    state: [''],
                    city: ['']
                }),
                aliases: this.formbuilder.array([
                    this.formbuilder.control('')//add duplicate array Validator
                ]),
                myInputs: this.formbuilder.array([
                    this.formbuilder.control('') //add duplicate array Validator
                ])
            })
        }

        ngOnInit() {
            this.aliaseS = this.profileForm.get('aliases') as FormArray;
            this.myInputs = this.profileForm.get('myInputs') as FormArray;
        }

        updateProfile() {
            this.profileForm.patchValue({
                firstName: 'affff',
                contact: {
                    mobileNo: '99898981'
                }
            })
            console.warn(this.profileForm.value);
        }
        onSubmit() {
            console.warn(this.profileForm.value);
        }

        getAliases() {
            return this.profileForm.get('aliases') as FormArray;
        }

        addInputs(key) {
//if duplicate array Validator  Validates as false then add row otherwise error

            if (key === 'aliases') {
           // if no duplicate text then
           this.aliaseS.push(this.formbuilder.control(''));
            } else if(key === 'myInputs '){
                 // if no duplicate text then
           this.myInputs.push(this.formbuilder.control(''));
            }
        }
        deleteAlias(pos) {
            this.aliaseS.removeAt(pos);
        }
    }

.html 

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <label>First Name:
        <input type="text" formControlName="firstName" required />
    </label>
    <br/>
    <label>
        Last Name:
        <input type="text" formControlName="lastName">
    </label>
    <br/>
    <br/>
    <div class="col-12" formGroupName="contact">
        <h3> Contacts</h3>
        <br/>
        <label>
            Mobile No
            <input type="text" formControlName="mobileNo">
        </label>
        <br/>
        <label>
            State
            <input type="text" formControlName="state">
        </label>
        <br/>
        <label>
            City
            <input type="text" formControlName="city">
        </label>
    </div>
    <br/>
    <div class="col-12"  formArrayName="aliases">
        <h3> Aliases</h3>
        <br/>
        <button type="button" (click)="addInputs('aliases')">Add Alias</button>

        <br/>
        <div *ngFor="let address of aliaseS.controls; let i = index;">
            <label>
                Alias:
                <input type="text"  [formControlName]="i" >
                <span (click)="deleteAlias(i)"> Delete</span>
            </label>
        </div>
    </div>
    <div class="col-12"  formArrayName="myInputs">
        <h3> myInputs</h3>
        <br/>
        <button type="button" (click)="addInputs('myInputs')">Add myInputs</button>
        <div *ngFor="let address of myInputs.controls; let i = index;">
            <label>
                Alias:
                <input type="text"  [formControlName]="i" >
            </label>
        </div>
    </div>
    <br>
    <div class="col-12" >
            <br>
            <br>
        <button type="submit">Submit</button>
        <button type="button" (click)="updateProfile()">Update</button>
    </div>
</form>
<br />
<br />
<p>{{profileForm.status}}</p>

1 Ответ

0 голосов
/ 11 февраля 2019

Я немного реорганизовал ваш код, и теперь он работает, как и ожидалось.Для проверки дубликатов я использовал уникальный валидатор среды валидации rxweb .

Вот код для применения уникального валидатора в FormControl. 

addControl(){
            return this.formbuilder.group({
             name:this.formbuilder.control('',RxwebValidators.unique())});
        }

Вот и все.

На стороне HTML я использовал отключенный атрибут и проверяю, допустим ли FormArray или нет.Если она действительна, кнопка будет активирована, и пользователь сможет ввести новый элемент.

Вот код HTML: 

 <button type="button" [disabled]="!profileForm.controls.aliases.valid" (click)="addInputs('aliases')">Add Alias</button>

Я преобразовал ваш код в stackblitz и внес изменения, пожалуйста.см. пример stackblitz

...