Question

我有一个带有ng-form的组件。我想动态设置ng-form名称，这样我就可以在组件之外轻松访问ng-form值。

示例：

<form name="formName">
<component name="componentName"></component>
</form>

在我拥有的组件内

<ng-form name="{{$ctrl.name}}">
// Some inputs with special validation 
</ng-form>

但每次我尝试访问我的组件中的$ ctrl.name都是未定义的，或者只是一个字符串而不是带有输入的表单。

我使用TYPESCRIPT：

@Component(app, {
  selector: 'component',
  templateUrl: 'templateUrl',
  bindings: {
    value: '=?ngModel',
    name: '@',
    required: '=?ngRequired',
    disabled: '=?ngDisabled',

  },
})
    console.log(this.name); ///A string, but no a form so I can manipulate it.

Answer 1

如果您希望表单对象在控制器上可用，而不是范围，那么除了表单声明之外，您可以执行上述操作

<form name="$ctrl[{{$ctrl.name}}]">
  ...
</form>

Answer 2

请尝试以下示例代码

Component.js

angular.module('myApp').component('component', {
   bindings: {            
        name: '@'
    },
  template:
    '<ng-form name={{$ctrl.name}}><input name="txtfirst" value="John"/><input type="button" ng-click="$ctrl.getFormData()"></ng-form>',
  controller: function($scope) {
      console.log(this.name);   

     this.getFormData = function(){
          console.log($scope[this.name]); 
     }        
  }
});

HTML

<component name="frmNameTest"></component>

如何以ng-form设置动态名称

2 个答案: