0

我在ngx-mydatepicker中工作以在我的 Angular(11) 应用程序中选择日期。我遵循了 URL https://github.com/kekeh/ngx-mydatepicker并且能够按预期获取日期选择器。

我已经在我的应用程序中实现了反应式表单，我做了以下更改。当我选择 toggleCalender 图标时，Datepicker 工作正常，并且我可以在单击 clearDate 图标时清除日期。

问题是，当我手动提供允许的日期输入时，我试图清除日期，它实际上从 formControl 中清除，但在网页中提供的日期仍然存在，我也试图从切换更改日期图标，它在网页中没有改变。仍然保留我提供的手动输入日期。

我错过了什么。我正在使用 ngx-datepicker 版本 9.0.2

@NgModule({
    imports:      [ BrowserModule, NgxMyDatePickerModule.forRoot() ],
    declarations: [ UserApp ],
    bootstrap:    [ UserApp ]
})
export class UserAppModule {}

我的用户 HTML 如下所示，

        <input class="form-control" style="float:none" placeholder="Select a date" ngx-mydatepicker name="myDate"
               formControlName="myDate" [options]="myOptions" #dp="ngx-mydatepicker"/>

        <span class="input-group-btn">
            <button type="button" class="btn btn-default" (click)="dp.clearDate()">
                <i class="glyphicon glyphicon-remove"></i>
            </button>
            <button type="button" class="btn btn-default" (click)="dp.toggleCalendar()">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>

我的用户组件如下所示，

export class UserApp implements OnInit {

    myOptions: INgxMyDpOptions = {
        dateFormat: 'dd/mm/yyyy'
    };

    private myForm: FormGroup;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.myForm = this.formBuilder.group({
            myDate: [null, Validators.required]
        });
    }

    clearDate(): void {
        // Clear the date using the patchValue function
        this.myForm.patchValue({myDate: null});
    }
}
4

0 回答 0