Выражение изменилось после того, как оно было проверено.Предыдущее значение: «ложь».Текущее значение: «правда»

Question

Я делаю проверку для выпадающих.У меня есть три выпадающих.Если я нажимаю кнопку сброса, он должен отдохнуть значения.В первый раз значения сбрасываются, но в следующий раз выпадающий список не работает и появляется ошибка выше: выражение было изменено после проверки.Предыдущее значение: «ложь».Текущее значение: «true».2) 1-й и 2-й выпадающие списки являются обязательными, но для 3-го выпадающего списка мне нужно написать логику для них, а для 2-го выпадающего списка - логика, если значение равно «да», то 3-й выпадающий список следует пометить как обязательный, иначе не требуется.

Файл TS

    export class AppComponent {
        PepPartner: "";
        PepBlacklisted: "";
        Blacklist: "";
        public formGroup: FormGroup;
        constructor(private fb: FormBuilder) { }

        screenofAML() {
            let self = this;
            this.formGroup = this.fb.group({
                PepPartner: ['', Validators.required],
                PepBlacklisted: ['', Validators.required],
                Blacklist: ['', Validators.required],
            });
        }

        validateForm() {
            if (this.formGroup.invalid) {
                this.formGroup.get('PepPartner').markAsTouched();
                this.formGroup.get('PepBlacklisted').markAsTouched();
                this.formGroup.get('Blacklist').markAsTouched();
                return;
            }
            else {
                const dataObj = {
                    PepPartner: this.formGroup.get('PepPartner').value,
                    PepBlacklisted: this.formGroup.get('PepBlacklisted').value,
                    Blacklist: this.formGroup.get('Blacklist').value,
                }
            }
        }
        onResetClick() {
            this.PepPartner = "";
            this.PepBlacklisted = "";
            this.Blacklist = "";
        }
    }

Файл HTML

    <div class="space">
        <mat-form-field>
            <mat-label>Is this partner a PEP?</mat-label>
            <mat-error *ngIf="formGroup.get('PepPartner').hasError('required')">
                PEP Partner is required
            </mat-error>
            <mat-select disableRipple [(ngModel)]="PepPartner" formControlName="PepPartner">
                <mat-option></mat-option>
                <mat-option value="1">Yes</mat-option>
                <mat-option value="2">No</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-label>Does this partner blacklisted</mat-label>
            <mat-error *ngIf="formGroup.get('PepBlacklisted').hasError('required')">
                Partner blacklisted is required
            </mat-error>
            <mat-select disableRipple [(ngModel)]="PepBlacklisted" formControlName="PepBlacklisted">
                <mat-option></mat-option>
                <mat-option value="1">Yes</mat-option>
                <mat-option value="2">No</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-error *ngIf="formGroup.get('Blacklist').hasError('required')">
                Blacklisted is required
            </mat-error>
            <input matInput placeholder="Blacklist(s)" [(ngModel)]="Blacklist" formControlName="Blacklist">
        </mat-form-field>
        <div class="button-position">
            <div class="text-right pr-0 pb-2">
                <div class="btn-group">
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" id="button1" mat-raised-button class="text-uppercase app-btn app-btn-primary-border app-color-primary" (click)="validateForm()">Save</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" id="button2" mat-raised-button class="text-uppercase app-btn app-btn-primary-border app-color-primary" (click)="onResetClick()">Clear</button>
                </div>
            </div>
        </div>
    </div>