对表单进行更改后，FormControl 未更新状态原始/脏或值

Question

这里是Angular新手

问题

我正在使用this library to create a crontab expression generator。该指令已被导入到具有另一个现有表单的页面中。我能够很好地运行自定义指令，并且运行良好。单击选项和输入时，它会生成正确的 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: ''}),
            endDate: 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>

Answer 1

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!
    }
}