2

I know guys there are lot of solutions regarding this question. But none works for me. I'm working with Ionic 2 Angular 2. On keyup event I want to patch Validator.required.

enter image description here

Here Ownership is ion-select with 2 ion-options.

enter image description here

On selecting Double 2 more fields open.

enter image description here

I want to validate both first and second owner. Validation works fine with first owner. With second owner I need some suggestions.

Here what I do. This is the form group. 2nd Owner name is without validators here.

this.sellerData = this.formBuilder.group(
        {
            Ownership: ['', Validators.required],
            FirstName: ['', Validators.required],
            LastName: ['', Validators.required],
            // Without validators
            FirstName2: [''],
            LastName2: [''],
       }

This is the template.

<form #seller = "ngForm" [formGroup] = 'sellerData' (submit) = "saveLocally(sellerData)">
        <ion-list>
            <ion-item>
                <ion-label>Ownership *</ion-label>
                <ion-select #Ownership formControlName = "Ownership">
                    <ion-option value = '1' placeholder = "Single">Single</ion-option>
                    <ion-option value = '2' placeholder = "Double">Double</ion-option>
                </ion-select>
            </ion-item>
            <div>
                <ng-container *ngFor = "let validation of validation_messages.Ownership">
                    <div class = "error-message" *ngIf = "(sellerData.get('Ownership').hasError(validation.type) && (sellerData.get('Ownership').dirty || sellerData.get('Ownership').touched)) || (sellerData.get('Ownership').hasError(validation.type) && seller.submitted)">
                        {{ validation.message }}
                    </div>
                </ng-container>
            </div>
            <ion-item>
                <ion-input formControlName = "FirstName" placeholder = "First name *"></ion-input>
            </ion-item>
            <div>
                <ng-container *ngFor = "let validation of validation_messages.FirstName">
                    <div class = "error-message" *ngIf = "(sellerData.get('FirstName').hasError(validation.type) && (sellerData.get('FirstName').dirty || sellerData.get('FirstName').touched)) || (sellerData.get('FirstName').hasError(validation.type) && seller.submitted)">
                        {{ validation.message }}
                    </div>
                </ng-container>
            </div>
            <ion-item>
                <ion-input formControlName = "LastName" placeholder = "Last name *"></ion-input>
            </ion-item>
            <div>
                <ng-container *ngFor = "let validation of validation_messages.LastName">
                    <div class = "error-message" *ngIf = "(sellerData.get('LastName').hasError(validation.type) && (sellerData.get('LastName').dirty || sellerData.get('LastName').touched)) || (sellerData.get('LastName').hasError(validation.type) && seller.submitted)">
                        {{ validation.message }}
                    </div>
                </ng-container>
            </div>
            <ion-list [hidden] = "!(Ownership.value == '2')">
                <ion-item>
/*********************** Here's KeyUp event ***************************/
                    <ion-input (keyup) = "onKeyUp()" value = "" formControlName = "FirstName2" placeholder = "First name(2nd Owner) *"></ion-input>
                </ion-item>
                <div>
                    <ng-container *ngFor = "let validation of validation_messages.FirstName2">
                        <div class = "error-message" *ngIf = "(sellerData.get('FirstName2').hasError(validation.type) && (sellerData.get('FirstName2').dirty || sellerData.get('FirstName2').touched)) || (sellerData.get('FirstName2').hasError(validation.type) && seller.submitted)">
                            {{ validation.message }}
                        </div>
                    </ng-container>
                </div>
                <ion-item>
                    <ion-input value = "" formControlName = "LastName2" placeholder = "Last name(2nd Owner) *"></ion-input>
                </ion-item>
                <div>
                    <ng-container *ngFor = "let validation of validation_messages.LastName2">
                        <div class = "error-message" *ngIf = "(sellerData.get('LastName2').hasError(validation.type) && (sellerData.get('LastName2').dirty || sellerData.get('LastName2').touched)) || (sellerData.get('LastName2').hasError(validation.type) && seller.submitted)">
                            {{ validation.message }}
                        </div>
                    </ng-container>
                </div>
            </ion-list>
        </ion-list>
    </form>

Than I updated these fields i.e. First name(2nd Owner) and Last name(2nd Owner) with validators using formgroup.patch

Here's onkeyUp

onKeyUp()
    {
        this.sellerData.patchValue(
        {
            FirstName2: ['', this.secondOwner()],
            LastName2: ['', this.secondOwner()],
        });
    }
    secondOwner()
    {
        if(this.sellerData.get("Ownership").value == 2)
            return Validators.required;
        else
            return;
    }

This returns a fuction. I want to validate these fields on run time.

Zeeshan Malik
  • 627
  • 1
  • 14
  • 31

0 Answers0