更改表单后，FormControl不更新状态原始/脏污或值

问题描述

这里有角新手

问题

我正在使用this library to create a crontab expression generator。该指令已导入具有其他现有形式的页面。我能够很好地运行custom指令，并且效果很好。单击选项和输入后，它将生成正确的cron选项卡表达式。最终表达式显示在单个<b></b>元素上。

所有更改后，我无法获得最终表达。每当我输出表单时，我都会获得在创建指令时设置的默认值。同样在DOM中，我可以看到表达式就在那里。我在获取最后一个表达式时遇到困难。

正如您在此处看到的那样，该表达是正确的，但我无法理解它。

代码

        this.cronForm = new FormControl(this.cronExpression);
        this.scheduleForm = new FormGroup({
            startDate: new FormControl({value: ''}),endDate: new FormControl({value: ''}),});

有两种形式，scheduleForm可以正常工作，每当我进行任何更改时，值都会反映出来，而且状态也会发生变化。但是，cronForm在控制台中记录值和状态时，始终显示相同的默认值，并且状态保持原始状态：

这是我的component.ts文件：

#imports and stuff
export class ScheduleComponent implements OnInit {
    public cronExpression = '55 17 ? * MON,TUE,WED,THU,FRI';
    cronForm: FormControl;
    scheduleForm: FormGroup;

    constructor() {
    }

    ngOnInit(): void {

        this.cronForm = new FormControl(this.cronExpression);
        this.scheduleForm = new FormGroup({
            startDate: new FormControl({value: ''}),});
    }


    save() {
        let requestPayload: any = {}
        requestPayload.notification = {
            startDate: this.scheduleForm.controls.startDate.value,endDate: this.scheduleForm.controls.endDate.value,}
        console.log(this.scheduleForm);
        console.log(this.cronForm);
    }
}

这是我的模板：

    <form [formGroup]="scheduleForm">
        <div class="panel base-margin-top">
            <div drawer-content class="col-6">

                <div class="row base-margin-top">

                    <div class="col-md-6">
                        <div class="form-group base-margin-bottom">
                            <div class="form-group__text">
                                <cng-form-field>
                                    <input cngInput formControlName="startDate" type="date"/>
                                    <label>Start Date</label>
                                </cng-form-field>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group base-margin-bottom">
                            <div class="form-group__text">
                                <cng-form-field>
                                    <input cngInput formControlName="endDate" type="date"/>
                                    <label>End Date</label>
                                </cng-form-field>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10 cron-tab-container">
                <cron-editor [(cron)]="cronExpression" [disabled]="isCrondisabled" [(options)]="cronoptions">
                    Cron here...
                </cron-editor>

                <div class="row alert alert-info" style="text-align:center">
                    <h3>
                        <b>{{cronExpression}}</b>
                    </h3>
                    <hr/>
                </div>
            </div>
        </div>

        <div class="col-md-6 row base-margin-top flex flex-right">
            <button class="btn btn--link">Cancel</button>
            <button (click)="save()" class="btn btn--primary" [disabled]="!scheduleForm.valid">
                <span>Send</span>
            </button>
        </div>
    </form>

解决方法

scheduleForm 已绑定到模板，但cronForm 未。但是据我了解，您只想要最后的cron表达式，对吗？因此，在save方法中，您可以将this.cronExpression的值而不是this.cronForm打印到控制台，然后查看是否打印出所需的值，那么您可以执行任何操作想要它。

export class ScheduleComponent implements OnInit {
    public cronExpression = '55 17 ? * MON,TUE,WED,THU,FRI';
    cronForm: FormControl;
    scheduleForm: FormGroup;

    constructor() { ... }

    ngOnInit(): void { ... }

    save() {
        let requestPayload: any = {}
        requestPayload.notification = {
            startDate: this.scheduleForm.controls.startDate.value,endDate: this.scheduleForm.controls.endDate.value,};
        console.log(this.scheduleForm);
        console.log(this.cronForm);        // <-- Not being used
        console.log(this.cronExpression);  // <-- This one is!
    }
}