Question

我正在验证Dropdowns。我有三个下拉菜单。如果单击“重置按钮”，则必须保留这些值。第一次的时间值被重置，但是下一次开始下拉菜单不起作用，并且遇到上述错误：检查表达式后，表达式已更改。先前的值：“ false”。当前值：“ true”。 2）第一个和第二个下拉列表是强制性的，但对于第三个下拉列表，我需要为其编写一个逻辑，如果值为“ yes”，则该逻辑用于第二个下拉列表，那么第三个下拉列表应标记为强制性，否则不需要。

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>

检查后表达式已更改。先前的值：“ false”。当前值：“ true”

0 个答案: