Question

我正在尝试将一个kendo-datepicker添加到角度反应形式。当我设置formControlName时，[（值）]中设置的日期不会出现在UI上。

示例：不工作

工作

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormGroupDirective } from "@angular/forms"
@Component({
selector: 'my-app',
template: `
    <div class="example-config">
        Selected value is: {{value | kendoDate:'MM/dd/yyyy'}}
    </div>
    <div [formGroup]="submitForm" class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
            [navigation]="false"
            [(value)]="value"
            formControlName="test"
        ></kendo-datepicker>
        <p>(use Alt+↓ to open the calendar, ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
    </div>
`
})

export class AppComponent {
public value: Date = new Date();
submitForm : FormGroup = new FormGroup ({
    test: new FormControl()
})
}

如何设置默认值，因为上述似乎不起作用。

Answer 1

您的问题是您应该将值对象添加到FormControl construcor，否则它最初会将其设置为undefined。（我认为）

改变这个： test: new FormControl()要测试：new FormControl(this.value)

Working demo here

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected value is: {{value | kendoDate:'MM/dd/yyyy'}}
        </div>
        <div [formGroup]="submitForm" class="example-wrapper" style="min-height: 400px">
            <p>Select a date:</p>
            <kendo-datepicker
                [navigation]="false"
                [(value)]="value"
                formControlName="test"
            ></kendo-datepicker>
            <p>Value= {{value}}</p>
        </div>
    `
})

export class AppComponent {
    public value: Date = new Date();
    submitForm : FormGroup = new FormGroup ({
        test: new FormControl(this.value)
    })
}

“[（value）]”对于kendo-datepicker不起作用

1 个答案: