Question

这是我的html文件代码

<form name="myForm" ng-controller="ExampleController" novalidate="">
<email classname="form-control" name="Email" type="email" modelname="email_id" 
placeholder="Email Address" formref="myForm" ></email>
<button ng-click="Click()">click</button>

我希望当我单击按钮时，它为我提供电子邮件的值，请使用ng-model（email_id）的值-

$scope.Click = function(){
    console.log($scope.email_id);
  };

这是我的组件代码

angular.module('textInputExample', []).component("email", {
template:
        '<input type="{{$ctrl.type}}" class="{{$ctrl.classname}}" 
placeHolder="{{$ctrl.placeholder}}" name="{{$ctrl.name}}" ng- 
model="$ctrl.modelname" required>' +
        '<div ng-messages="$ctrl.formref[$ctrl.name].$error" ng- 
show="$ctrl.formref[$ctrl.name].$touched">' +
        '<p ng-message="required">Providing a {{$ctrl.placeholder}} is 
mandatory.</p>' +
        '<p ng-message="email">{{$ctrl.placeholder}} is invaild</p></div>',

bindings: {
    formref: '<',
    name: '@',
    placeholder: '@',
    classname: '@',
    type: '@',
    modelname:'='
}

在上面的组件代码中，我正在使用该modelname值分配给ng-model属性，然后我想在控制器中使用该值访问输入字段值，但是我没有将ng-model设置为该值我正在分配它（电子邮件ID），我也无法访问输入字段的值。请帮助我我该怎么做。如果需要任何信息来升级此问题以解决问题，请通知我。

Answer 1

<input type="{{$ctrl.type}}" class="{{$ctrl.classname}}" placeHolder="{{$ctrl.placeholder}}" name="{{$ctrl.name}}" ng- model="$ctrl.modelname" required>

尝试绑定ng-model，然后就可以从HTML文件获取值。尝试使用以下代码段更改代码。

<input type="{{$ctrl.type}}" class="{{$ctrl.classname}}" placeHolder="{{$ctrl.placeholder}}" name="{{$ctrl.name}}" [(ngModel)]="$ctrl.modelname" required>

Answer 2

我找到了解决方案。如果有人遇到相同的问题，这是我的解决方案-

将此代码写入您的js文件

component("email", {
bindings: { ngModel: '<' },
require: { ngModelCtrl: 'ngModel' },
template:
        `<input type="{{$ctrl.type}}" class="{{$ctrl.classname}}" placeHolder="{{$ctrl.placeholder}}" name="{{$ctrl.name}}" ng-model='$ctrl.ngModel'
             ng-change="$ctrl.ngModelChange()" required>
        <div ng-messages="$ctrl.formref[$ctrl.name].$error" ng-show="$ctrl.formref[$ctrl.name].$touched">
        <p ng-message="required">Providing a {{$ctrl.placeholder}} is mandatory.</p>
        <p ng-message="email">{{$ctrl.placeholder}} is invaild</p></div>`,

bindings: {
    formref: '<',
    name: '@',
    placeholder: '@',
    classname: '@',
    type: '@',
    modelname:'='
},
controller: function() {
  this.ngModelChange = () => {
    this.ngModelCtrl.$setViewValue(this.ngModel);
  };
}

这是html文件代码

<email classname="form-control" name="Email" type="email" ng-model="email_id" 
placeholder="Email Address" formref="myForm" ></email>

感谢您对所有人的帮助

如何在angularjs的输入组件上使用ng-model

2 个答案: