Question

我有两个表单字段base和value我希望value从base派生，如果没有提供的话。此外，验证工作时会很好（我需要value）。

这是一个plnkr，它是我的代码来自coffeescript的粗略翻译，但问题是相同的。相同的代码，但不在plnkr（和coffeescript）中：

app.controller "MyCtrl",($scope) ->
  [$scope.derive, $scope.derived]  = [yes, no]
  changeBase = () ->
    if $scope.derive
      $scope.value = if $scope.derived = $scope.base isnt ''
          $scope.base + " complicated operation"
        else ''

  $scope.changeBase = changeBase
  $scope.changeVal = () ->
    if $scope.derive = $scope.val isnt ''
      changeBase()
    else 
      $scope.derived = false

HTML：

<form name="form" ng-controller="MyCtrl" novalidate>
  Value<input type="text" ng-model="value" 
             ng-model-options="{debounce: 500}"
             ng-change="changeVal()"
             required>
  <span ng-show="derived">Is derived</span>
  <br>Base <input type="number" ng-model="base" ng-change="changeBase()">
  <br>
  <span ng-show="form.$invalid">from is invalid</span>
</form>

如果用户已清除值字段，我会使用debounce来立即更改value。如果我删除了required属性，我几乎得到了所需的行为，但验证不再有效（很明显，我删除了它）。（我想添加一个依赖于button）

的ng-disabled="$form.invalid"

但有时布尔值（derive，derived）进入错误的状态，我不知道如何解决这个问题。 除此之外，如果有人为这个简单的任务提供了一个看起来不像逻辑地狱或成千上万行代码的解决方案，我也要感激不尽。

修改：有些情况：

用户修改了base字段，value应该是派生值..
用户修改value字段，value如果他编辑base字段
如果用户清空value字段，则其行为应与1相同。
如果用户清空base字段并导出value，则应清空value

如果既未输入base也未输入value，则form.$invalid应为true，并且应设置相应的类。 form.value.$error.required true最好是{{1}}。

Answer 1

我提出了这个解决方案，但是如果出现了一些更好的解决方案，我很乐意接受并提出它们。

value required的失效会阻止changeVal提供的ng-change功能被触发。因此，我将验证移开了。这并不完美，因为现在<input> value未显示为原因，为什么表单无效，但表单仍然存在。（HTML几乎相同，除了没有required属性，并且changeVal通过ng-init调用一次。感觉有点hackish，因为实际上我重新实现了ng-required指令，好像它没有绑定到特定字段（但它是）

app.controller "MyCtrl",($scope) ->
  [$scope.derive, $scope.derived]  = [yes, no]
  changeBase = ->
    if $scope.derive
      $scope.value = if $scope.derived = $scope.base isnt ''
          $scope.base + " complicated operation"
        else ''
    changeValOrBase()

  $scope.changeBase = changeBase
  $scope.changeVal = () ->
    if $scope.derive = $scope.val isnt ''
      changeBase()
    else 
      $scope.derived = false
    changeValOrBase()

  changeValOrBase = ->
    $scope.form.$setValidity("valueGiven",$scope.value != '' and $scope.value?)

我可以添加如下信息：

<div ng-message="form.$error.valueGiven">Please supply a base value or value</div>

如何处理表单中的派生字段

1 个答案: