FormControl 在对表单进行更改后未更新状态 pristine/dirty 或值

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

FormControl 在对表单进行更改后未更新状态 pristine/dirty 或值

FormControl not updating state pristine/dirty or value after making changes to form

cron

typescript

angular-directive

angular

angular-reactive-forms

问题

代码