Angularjs Angular Formly—从控制器生成模型的自定义类型

我一整天都在寻找实现这一目标的方法，任何帮助都将不胜感激。 我们希望创建一个日期选择器，但不使用javascript日期格式，而是使用字符串“YYYY-MM-DD”。因此，我们尝试创建一个自定义类型，它有两个输入，一个type=“date”，以便用户可以引入他想要的日期，另一个隐藏的type=“text”，用于存储实际的模型。 一开始看起来不错：

formlyConfig.setType({
  'name': 'nativeDateSelect',
  template: `
    <input type="text" class="form-control" style="display: none;"
      ng-model="model[options.key]" />

    <input type="date" class="form-control"
      ng-model="dateValue"
      formly-skip-ng-model-attrs-manipulator />
  `,
  wrapper: ['bootstrapLabel', 'bootstrapHasError'],
  controller: function ($scope, moment) {
    $scope.dateValue = null;

    $scope.$watch('model[options.key]', function (newValue) {
      if (angular.equals($scope.dateValue, moment(newValue).toDate())) return;
      $scope.dateValue = moment(newValue).toDate();
    });

    $scope.$watch('dateValue', function (newValue) {
      if (angular.equals($scope.model[$scope.options.key], moment(newValue).format('YYYY-MM-DD'))) return;
      $scope.model[$scope.options.key] = moment(newValue).format('YYYY-MM-DD');
    });
  },
  'defaultOptions': {
    'extras': {
      'validateOnModelChange': true
    }
  }
});

formlyConfig.setType({
“名称”：“nativeDateSelect”，
模板：`
`,
包装器：['bootstrapLabel'，'bootstrapHasError']，
控制器：功能（$scope，moment）{
$scope.dateValue=null；
$scope.$watch（'model[options.key]'，函数（newValue）{
if（angular.equals（$scope.dateValue，moment（newValue.toDate（））返回；
$scope.dateValue=时刻（newValue）.toDate（）；
});
$scope.$watch（'dateValue'，函数（newValue）{
if（angular.equals（$scope.model[$scope.options.key]），矩（newValue.format（'YYYY-MM-DD'））返回；
$scope.model[$scope.options.key]=矩（newValue.format（'YYYY-MM-DD'）；
});
},
“默认选项”：{
“临时演员”：{
“validateOnModelChange”：true
}
}
});

就是这样，它实际上起作用了，更改任何一个输入都会修改另一个输入

但问题是，一旦我以实际的形式引入这种类型并尝试使用它，比如说添加onChange函数，它将不会触发，因为我没有对文本输入进行更改

/*全局角度*/
（功能（）{
"严格使用",；
var app=angular.module（'formlyExample'，['formly'，'formlyBootstrap'，'angularmonent']，函数配置（formlyConfigProvider）{
//在此处设置模板
formlyConfigProvider.setType([
{
“名称”：“nativeDateSelect”，
模板：
' ' +
'',
包装器：['bootstrapLabel'，'bootstrapHasError']，
控制器：功能（$scope，moment）{
$scope.dateValue=null；
$scope.$watch（'model[options.key]'，函数（newValue）{
if（angular.equals（$scope.dateValue，moment（newValue.toDate（））返回；
$scope.dateValue=时刻（newValue）.toDate（）；
});
$scope.$watch（'dateValue'，函数（newValue）{
if（angular.equals（$scope.model[$scope.options.key]），矩（newValue.format（'YYYY-MM-DD'））返回；
$scope.model[$scope.options.key]=矩（newValue.format（'YYYY-MM-DD'）；
});
},
“默认选项”：{
“临时演员”：{
“validateOnModelChange”：true
}
}
}
]);
});
应用程序控制器（'MainCtrl'，函数MainCtrl（formlyVersion）{
var vm=这个；
//函数赋值
vm.onSubmit=onSubmit；
vm.exampleTTitle='默认选项'；//添加此选项
vm.model={}；
vm.fields=[
{
“类型”：“nativeDateSelect”，
“键”：“开始日期”，
“expressionProperties”：{
'templateOptions.label'：'\'startDate\'
},
“模板选项”：{
“必需”：true，
“onChange”：函数（模型值、字段、范围）{
警报（'startDate:'+modelValue）；
}
}
}
];
vm.originalFields=angular.copy（vm.fields）；
//函数定义
函数onSubmit（）{
警报（JSON.stringify（vm.model），null，2）；
}
});
})();

角形示例
从控制器更改我们的模型

提交
模型
{{vm.model}json}
字段（注意，未显示函数）
{{vm.originalFields | json}
形式
{{vm.form | json}