validation - FormGroup.patchValue 未正确修补对象元素 Ionic 2 Angular 2

Question

我知道伙计们有很多关于这个问题的解决方案。但没有一个对我有用。我正在使用 Ionic 2 Angular 2。在 keyup 事件中，我想修补 Validator.required。

这里的所有权是带有 2 个离子选项的离子选择。

在选择Double 2 时，会打开更多字段。

我想验证第一个和第二个所有者。验证适用于第一个所有者。对于第二个所有者，我需要一些建议。

这就是我所做的。这是表单组。第二个所有者名称在这里没有验证器。

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

这是模板。

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

比我使用 formgroup.patch 使用验证器更新了这些字段，即名字（第二所有者）和姓氏（第二所有者）

这是 onkeyUp

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

这将返回一个函数。我想在运行时验证这些字段。