Angular 4表单在创建时崩溃

Question

我试图在对话框菜单的Angular 4中创建此表单。问题是无论何时创建表单，它都会立即崩溃并显示错误消息：

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

此外，输入标签会在我开始输入时失去焦点（换句话说，我根本无法输入输入内容）

我尝试注释掉相关代码，但没有任何反应

HTML代码：

<form [formGroup]="saveForm" (ngSubmit)="submitForm()" novalidate>
        <div class="columns medium-12 small-12 row-margin">
            <div class="row row-margin">
                <label for="testPlanName" class="columns medium-4 small-12">Test plan name : </label>
                <input alloy type="text" class="alloy-input columns medium-8 small-12" [(ngModel)]="save.testPlanName" formControlName="testPlanName"
                    name="testPlanName"> //This is where it crashes.
            </div>
            <div class="row row-margin">
                <div class="columns medium-4 small-12">How would you like to create : </div>
                <div class="columns medium-4 small-12 radio-group">
                    <div class="row align-middle">
                        <div class="column shrink">
                            <div class="radio">
                                <input type="radio" id='optionNew' name="createOption" value="New version" [(ngModel)]="save.createOption" formControlName="createOption" 
                                    (click)="setCreateOption('New version')" /> //This is where it crashes.
                                <span></span>
                            </div>
                        </div>
                        <div class="column foundation-column-gutter-removal">
                            <label for="optionNew">New version</label>
                        </div>
                    </div>
                    <div class="row align-middle">
                        <div class="column shrink">
                            <div class="radio">
                                <input type="radio" id='optionOverwrite' name="createOption" value="Overwrite existing" [(ngModel)]="save.createOption" formControlName="createOption"
                                    (click)="setCreateOption('Overwrite existing')" /> //This is where it crashes.
                                <span></span>
                            </div>
                        </div>
                        <div class="column foundation-column-gutter-removal">
                            <label for="optionOverwrite">Overwrite existing</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="columns medium-12 small-12 section-footer">
            <input type="hidden" [(ngModel)]="save.projectId" formControlName="projectId">
            <input type="hidden" [(ngModel)]="save.testPlanId" formControlName="testPlanId">
            <button alloy-button default type="submit" [disabled]="!saveForm.valid">Save</button>
            <button alloy-button default mat-dialog-close elementFocus>Cancel</button>
        </div>
    </div>
</form>

脚本代码：

export class SaveDialogContentComponent implements OnInit, OnDestroy {
    public saveForm: FormGroup;
    // tslint:disable-next-line: no-any Reason-Any is used for form data-types
    public save = {} as any;
    public dialogType: string;
    public projectData: string;
    public testPlanData: string;

    // Subscriptions
    private getProjectDataSubscription: Subscription;
    private getTestPlanDataSubscription: Subscription;

    constructor(// tslint:disable-next-line: no-any Reason: data type is unknown and can be anything*/
        @Inject(MAT_DIALOG_DATA) public saveType: any,
        private testService: TestService
    ) { }

    public ngOnInit(): void {
        this.dialogType = this.saveType.content.type;
        this.initializeForm();
        this.save.createOption = 'New version';

        if (this.dialogType !== 'new') {
            this.projectData = this.saveType.content.projectData;
            this.testPlanData = this.saveType.content.testPlanData;

            setTimeout(() => {
                this.getTestplanDetails(this.projectData);
                this.testService.setProjectData(this.projectData);
                // tslint:disable-next-line align no-magic-numbers Reason: aligment for settimeout
            }, 500);
        }

        this.getProjectDataSubscription = this.testService.getProjectData().subscribe((data: string) => {
            this.save.projectId = data;
        });

        this.getTestPlanDataSubscription = this.testService.getTestPlanData().subscribe((data: string) => {
            this.save.testPlanId = data;
            this.getTestplanDetails(data);
        });
    }

    public getTestplanDetails(testId: string): void {
        this.testService.getTestPlanHeaderWithTestId(testId).subscribe(
            (data) => {
                if (data) {
                    this.save.testPlanId = data.id;
                    this.save.testPlanName = data.name;
                    this.save.projectId = data.projectId;
                }
            }
        );
    }

    public initializeForm(): void {
        if (this.dialogType === 'new') {
            this.saveForm = new FormGroup({
                'projectId': new FormControl(this.save.projectId, [Validators.required]),
                'testPlanId': new FormControl(this.save.testPlanId),
                'testPlanName': new FormControl(this.save.testPlanName, [Validators.required]),
                'createOption': new FormControl({ value: this.save.createOption, disabled: true })
            });
        } else {
            this.saveForm = new FormGroup({
                'projectId': new FormControl(this.save.projectId, [Validators.required]),
                'testPlanId': new FormControl(this.save.testPlanId),
                'testPlanName': new FormControl({ value: this.save.testPlanName, disabled: true }, [Validators.required]),
                'createOption': new FormControl(this.save.createOption)
            });
        }
    }
}