Question

我正在构建一个动态表单，我正在使用HTML5日期输入来输入date类型的字段。我正在努力获取日期输入以显示我的日期，并得出结论，该值必须是JavaScript日期或日期不会显示。如果我错了，有人请指正，因为它似乎不应该是一个要求。因为我的字段是动态的，所以我不能简单地将特定字段初始化为Date，因此我创建了一个指令以转换为JavaScript日期。

angular.module( 'convertDate-directive', [] )
.directive('convertDate', function( $parse ) {
    return {
        restrict: "A",
        link: function( scope, element, attrs ) {
            var fieldModel = $parse( attrs.ngModel );
            var fieldValue = fieldModel( scope );
            fieldModel.assign( scope, new Date( fieldValue ) );
        }
    };
});

这是我的日期输入，仅当字段的类型为date时才会呈现：

<input type="date"
       ng-if="field.type == 'date'"
       dynamic-model="field.name"
       ng-model="field.name"
       name="field.name"
       max="{{field.maxValue | date : 'yyyy-MM-dd'}}"
       min="{{field.minValue | date : 'yyyy-MM-dd'}}"
       ng-required="field.required"
       ng-model-options="{ updateOn: 'blur' }"
       convert-date
       class="form-control">

这个指令的问题是它触发了我在控制器中的一个对象上的$ watch，它确定是否已经进行了更改并且需要进行保存。

我的手表代码：

$scope.$watch( 'application.' + resource.name, function( newValue, oldValue ) {
    if ( newValue !== oldValue ) {
        resource.changed = true;
    }
}, true );

有没有办法在这种情况下抑制更改事件？或者，有没有更好的方法来初始化HTML5日期字段？寻找想法。谢谢！

Answer 1

日期输入并不要求将值设置为Date对象。它要求它是ISO格式。有关详细信息，请参阅此问题/答案：pre-populating date input field with Javascript

Answer 2

每次更改范围值时都会触发

$watch，这包括初始化。但是，您可以在初始化发生之前使用旧值为undefined的事实：

$scope.$watch('field.name', function(newValue, oldValue)
{
    // Do not save if there is no change
    // OR this is an initialization (oldValue is undefined)
    if (newValue == oldValue || typeof oldValue === 'undefined') return;

    // Run your save() function now
});

AngularJS将动态日期字段初始化为JavaScript Date

2 个答案: