angular - 以角度反应形式在 FormArray 中重复数组验证器

Question

我正在添加Aliasonclick of addInputs() 方法，基本上是在某些条件下添加新的输入文本字段。

为此，我正在尝试创建custom duplicate array validator directive（同步或异步 formArray 验证器）。这意味着 aAlias formArray应该使用 中的其他元素验证当前输入中的文本Alias formArray。如果没有重复，则添加新输入，否则警告重复文本；

alias = ['abc', 'abc'] <--- 如果输入的文本与其他文本匹配，则验证失败。

.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>

标签： angularangular7reactive-forms

Answer 1

我对您的代码进行了一点重构，现在它按预期工作。对于重复验证，我使用了 rxweb 验证框架的唯一验证器。

这是在 FormControl 上应用唯一验证器的代码。

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

而已。

在 HTML 方面，我使用了 disabled 属性并检查 FormArray 是否有效。如果它有效，那么按钮将被启用并且用户可以输入新元素。

这是HTML的代码：

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

我已经在 stackblitz 中转换了您的代码并进行了更改，请参考stackblitz 示例