Угловые реактивные формы, проверка одной формы на основе FormControl в другой форме

Question

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

см. Код ниже, код rechargeCode во второй форме связан с оператором, который выбран в первой форме. и если выбран какой-то конкретный оператор, код перезарядки должен быть обязательным.

<mat-vertical-stepper class="mat-elevation-z4" [linear]="true">
<mat-step [stepControl]="verticalStepperStep1">
    <div fxLayout="row" fxLayoutAlign="center">
         <form fxLayout="column" [formGroup]="verticalStepperStep1" fxFlex="50">
            <ng-template matStepLabel>operator select</ng-template>
            <div fxFlex="1 1 auto" fxLayout="column">
                <mat-form-field appearance="" class="right-align" fxFlex="100">
                    <mat-label>operator</mat-label>
                    <mat-select formControlName="operator" (selectionChange)="operatorChanged()" required>
                        <mat-option *ngFor="let item of operatorList" value="{{item.value}}">
                            {{item.name}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutAlign="center center">
                <button fxFlex="20" fxFlex.lt-md="50" mat-raised-button matStepperNext type="button" color="accent">
                    next
                </button>
            </div>
        </form>
    </div>
</mat-step>

<mat-step [stepControl]="verticalStepperStep2">
    <div fxLayout="row" fxLayoutAlign="center">
        <form fxLayout="column" [formGroup]="verticalStepperStep2" fxFlex="50">
            <ng-template matStepLabel>mobile number</ng-template>
            <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="center">
                <mat-form-field appearance="" class="right-align" fxFlex="100">
                    <mat-label>mobile number</mat-label>
                    <input matInput type="tel" formControlName="msisdn" required>
                </mat-form-field>
                <mat-form-field class="right-align" fxFlex="100">
                    <mat-select formControlName="rechargeCode">
                        <mat-option *ngFor="let item of rechargeCodeList" value="{{item.value}}">
                            {{item.name}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutAlign="center center">
                <button fxFlex="20" fxFlex.lt-md="50" mat-raised-button matStepperPrevious type="button" color="accent">
                    previous
                </button>
                <button fxFlex="20" fxFlex.lt-md="50" mat-raised-button matStepperNext type="button" color="accent">
                    next
                </button>
            </div>
        </form>
    </div>
</mat-step>
<mat-step>
    <ng-template matStepLabel>final step</ng-template>
    <div class="h2 m-16" fxLayout="row" fxLayoutAlign="center center">
        <div class="card-preview">
            <div class="fuse-card">
                <div class="p-16">
                    <div class="h1">final</div>
                </div>
                <div class="card-divider"></div>
                <div class="p-16 pt-4">
                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                        <div>
                            <div *ngIf="this.verticalStepperStep2.get('msisdn')" class="h2 secondary-text">شماره موبایل: {{this.verticalStepperStep2.get('msisdn').value}}</div>
                        </div>
                    </div>
                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                        <div>
                            <div *ngIf="this.verticalStepperStep1.get('amount')" class="h2 secondary-text">مبلغ قابل پرداخت: {{this.verticalStepperStep1.get('amount').value}} ريال</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</mat-step>

что я могу сделать?

Answer 1

Есть много вариантов, например, вы можете проверить поле первой формы и использовать setVAlidataors для второй формы, чтобы назначить новый валидатор, например,

if (this.firstForm.get('formControlThatYouNeed').value) {
    this.secondForm.get('formControlYouNeedToUpdate').setValidators([Validator.required]);
}

не забудьте включить другие валидаторы (еслидля этого элемента управления) в массиве setVAlidataors, так как этот метод удаляет старые валидаторы. Также вы можете создать собственный валидатор, например,

customValidator(firstFormFieldValue: any): ValidatorFn {
    return (control: AbstractControl | null) => {
        if (firstFormFieldValue.notSelected) {
            return null;
        }

        const error = Validators.required(control);
        if (error) {
           const firstError = Object.keys(error)[0];
           return { [firstError]: { message } };
        }
        return null;
    }
}

и использовать его вот так

this.fb.group({
      field: ['fieldValue', [this.customValidator(this.firstFormFieldValue)]],
}));