Как использовать NG-модель на входной компонент в Angularjs

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 (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:'='
}

в приведенном выше коде компонента. Я использую это имя модели, чтобы присвоить свойству ng-model, тогда я хочуиспользуйте это значение в контроллере для доступа к значению поля ввода, но я не устанавливаю ng-model значение, которому я его назначаю (email_id), а также я не могу получить доступ к значению поля ввода.Пожалуйста, помогите мне, что я должен сделать для этого.если какая-либо информация необходима для пересмотра этого вопроса, пожалуйста, сообщите мне.

Answer 1

Я нашел свое решение.вот мое решение, если у кого-то возникнут проблемы с такой же проблемой -

запишите этот код в свой 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>

Спасибо за помощь всем

Answer 2

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

попробуйте связать ng-модель, а затем вы можете получить значения из / в HTML-файл.Попробуйте изменить код с помощью приведенного ниже фрагмента.

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