个人中心
gpt4 book ai didi

javascript - Angular 指令将 ngmodel 值从 null 更改为未定义会破坏验证

转载 作者：行者123 更新时间：2023-12-03 05:53:31 27 4
gpt4 key购买 nike

我创建了一个 plnkr 来描述我的问题:Link to plnkr

问题描述:我有一个数字字段，其中的值被写入模型。首先，我像第一个输入一样实现了这个功能。这个实现的问题是，如果我输入一些内容然后删除，我有以下模型:

{"firstNumber":null,"secondNumber":64}

不幸的是，这种表示方式对我来说是 Not Acceptable ，我需要以下结果:

{"secondNumber":64}

为此，我接受了指令并实现了第二个字段。现在我收到了正确的输出，但是当我删除该值时，表单变得无效。

此外，我还添加了第三个和第四个输入，以证明该指令也破坏了所需的验证。

所以，问题是:如何改进输入字段以使其不具有模型

{"firstNumber":null,"secondNumber":64}

但是

{"secondNumber":64}

并且不破坏 Angular 表单的验证机制。

供引用:我有以下 HTML:

<body ng-controller="MainCtrl as vm">
<h1>Validating input inside ng-repeat with Angular 1.3</h1>

<form name="vm.myForm" novalidate>
  <input type="number" ng-model="vm.fields.firstNumber" name="firstNumber">
  <input type="number" ng-model="vm.fields.secondNumber" name="secondNumber" null-to-undefined>
  <br>
  <input type="number" ng-model="vm.fields.thirdNumber" name="thirdNumber" ng-required = "true">
  <input type="number" ng-model="vm.fields.fourthNumber" name="fourthNumber" null-to-undefined ng-required="true">
</form>
</body>

以及以下 Controller 和指令代码:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var vm = this;

  vm.fields = {};
  vm.fields.firstNumber = 12;
  vm.fields.secondNumber = 24;
  vm.fields.thirdNumber = 64;
  vm.fields.fourthNumber = 128;

});

app.directive('nullToUndefined', function($timeout) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.$parsers.push(function(viewValue, modelValue) {
        if (viewValue === null) {
          $timeout(function() {
            //ctrl.$setValidity('number', true);
          });
          return undefined;
        }
        return viewValue;
      });
    }
  };
});

附:我尽可能地削减代码以重现我的主项目中的问题。我将不胜感激任何解决方案，但如果有人可以提出以下解决方案，那就太酷了:1.表现良好2. 以 Angular 方式表现。

最佳答案

您可能应该专注于其他解决方案，而不是编写指令。

你有一个带有 props 的对象(firstNumber，secondNumber，...)。

您需要使用 Angular 验证属性(是否为 null？是正确的数字吗？)。

然后，您需要使用非空值过滤对象 Prop ，而不需要更改模型:您的输入绑定(bind)到模型属性，如果您破坏属性，Angular 将无法验证并失败。

我们能做到:

  • Select all keys of a.fields
  • Iterate all keys, filters
  • We got all non-null keys
  • Reduce non-null keys to a new object, without mutation of "a"
const a = {
  fields: {
    a: 1,
    b: 2,
    c: null,
  },
};

// After form validation
const newA = Object
  .keys(a.fields)
  .filter(k => a.fields[k] !== null)
  .reduce(
    (accumulator, k) => 
      Object.assign(
        accumulator,
        { 
          fields: Object.assign(accumulator.fields, { [k]: a.fields[k] }) 
        }
      ),
    { fields: {} }
  );

如果您需要过滤 undefined + null，只需对过滤器做一些检查:

  .filter(k => a.fields[k] != null)

编辑:修复代码。

关于javascript - Angular 指令将 ngmodel 值从 null 更改为未定义会破坏验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40045185/

27 4 0
文章推荐： javascript - angularjs 指令两种方式绑定(bind)不起作用
文章推荐： javascript - 使用条件时不显示 React 组件
文章推荐： javascript - Ruby on Rails - 检查 Assets (.js) 的加载位置
文章推荐： javascript - Jquery，在文本区域中格式化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com