Angular 7形式ExpressionChangedAfterItHasBeenCheckedError-带条件输入字段

在我的Angular 7表单之一中,我试图根据其他用户输入值创建输入字段。这是我的html代码。

div>
     <form [formGroup]="UserForm" #UserAdd="ngForm">               
        <mat-form-field>
            <mat-label>Gender</mat-label>
            <mat-select [(value)]="gentype" [formControl]="gendertype" required>
                <mat-option value="Male">Male</mat-option>
                <mat-option value="Female">Female</mat-option>
            </mat-select>
            <mat-error *ngIf="gendertype.hasError('required')">
                Gender is required.
            </mat-error>
        </mat-form-field>       
        <mat-form-field>
            <mat-label>Enrolled</mat-label>
            <mat-select [(value)]="enrol" [formControl]="enrolled" required>
                <mat-option value="No">No</mat-option>
                <mat-option value="Yes">Yes</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field class="form-element" *ngIf="enrol=='Yes'">
            <mat-label>User Preference</mat-label>
            <input matInput [placeholder]="gentype=='Male' ? 'Chicago' : 'Milan'" formControlName="preference" [required]="true" autocomplete="off">
            <mat-error *ngIf="preference.touched && !preference.required">
                Preference is required.
            </mat-error>
        </mat-form-field>
    </form>
    <button mat-raised-button color="primary" type="button" (click)="Save();"[disabled]="!UserAdd.form.valid">SAVE</button>
</div>

Component.ts代码。

private UserForm: FormGroup; 
ngOnInit() {
    this.createForm()   
  }
createForm() {
    console.log('in createForm')
    this.UserForm = new FormGroup({
            gendertype: new FormControl(), 
            enrolled: new FormControl('No'),
            preference: new FormControl('')
    })
  }  
get gendertype() { return this.UserForm.get('gendertype') }
get enrolled() { return this.UserForm.get('enrolled') }
get preference() { return this.UserForm.get('preference') }

我在这里遇到的问题,当用户选择“ enrol-No”时,表单处于无效状态,并且SAVE按钮被禁用。我想将偏好输入设为“必填”。如果用户选择“ enrol-Yes”,我会收到错误消息

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'disabled: false'. Current value: 'disabled: true'. 

请提出建议,我错了,并且是解决此情况的好方法。