Enter Specific Character in the inputbox(prevent user from entering the specific character)


#1

Hi , is there any solution in entering specific character in the inputbox?


#2

open keyboard an write the char you want? ^^

please specify your question.


#3

This is i want to happen :smile:

.factory(‘FactoryofQuestions’, function() {

    {
        
            question: "RO RORPOEAT",
            answer: "or operator"
           
        },
        {
       
            question: "UARNGLA",
            answer: "angular"
          
        },
        {
        
            question: "AAJVRTSCIP",
            answer: "javascript"
            
        },

 ];


#4

You can try this: https://github.com/AlphaGit/ng-pattern-restrict


#5

you can simple use ngPattern instead of external module:

<input type="text" ng-pattern="VALID_CHARACTERS_OR_REGEX">

https://docs.angularjs.org/api/ng/directive/input


#6

ng-pattern will allow you to input wrong character invalidating the field. But ng-pattern-restrict will not allow you to enter wrong characters at all


#7

yep --> then hang on ngChange --> and strip unwanted chars :wink:


#8

or use module that already does this for you? :smiley:


#9

yeahh and have stupid dependencies and do not care what the module really does… it takes longer to include the thing then implement a mini-function to do that.


#10

Can you please give me some example of what your saying , so I can understand it clearly ? THanks :slight_smile:


#11

I did this to get the Array character length on my array ,
My questions is How can I get the array specific character and put it into this ng-pattern ?

<input type="text" ng-pattern="{{questions[1]}}"> // is this correct?

Just like this @DaDanny Example, :slight_smile:

 <input type='text' ng-value={{questions[1].maxCharLength()}}>

#12

a little explanation --> a string is something like a array of chars —> so you can write a little function where you loop over each string char --> and push the unique characters in a temp array --> after that join them in a custom string.

Or you add an additional key to your question object --> ‘pattern’: 'ropeat ’ or as a regex /^[ropeat\s]+$/


#13

Is this correct ?

services.js
                .factory('FactoryofQuestions', function() {
         var questions = [
    {
        
            pattern: "RO RORPOEAT", // I tried to insert pattern as my object 
            answer: "or operator"
           
        },
        {
       
            pattern: "UARNGLA",
            answer: "angular"
          
        },
        {
        
            pattern: "AAJVRTSCIP",
            answer: "javascript"
            
        },

 ];

In my input box , how can I call my array object in my controller and implement it on the inputbox ?

I tried to do this on my inputbox but it’s not working , can you help me fix it ?

<input type="text" ng-pattern="{{questions[1].pattern]}}"> // is this correct?

#15

I found this directive , I think this is what I’m looking for , but I’ve got a problem , I don’t know how can I inject my array object and it’s index in this directive

.directive('productionQty', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        var transformedInput = text.replace(/[^]/g, '');
        console.log(transformedInput);
        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

But I’m having a problem ,
How can I inject these arrays

   .factory('FactoryofQuestions', function() {
             var questions = [
        {
            
                pattern: "RO RORPOEAT", // I tried to insert pattern as my object 
                answer: "or operator"
               
            },
            {
           
                pattern: "UARNGLA",
                answer: "angular"
              
            },
            {
            
                pattern: "AAJVRTSCIP",
                answer: "javascript"
                
            },
    
     ];

 return {

        getQuestion: function(id) {
           
            if(id < questions.length) {
                return questions[id];
                
            } else {
                return false;
            }
        },
        questions : questions


    };

})

in this input box ?

<input production-qty="I want to inject my array here" type="text" name="answer" >

I don’t know what I’m gonna do with this line in my directive , can I call this transformedInput into the inputbox ?

 var transformedInput = text.replace(/[^In This part accepts all the letters that are here]/g, '');

I tried ng-pattern of @bengtler and ng-pattern-restrict of @yurinondual but it’s not working :cry:
Is there any other solution , other than this , Or I’m just wrong with doing this code ? Please help me.


#16

create a simple plunkr with your attempt please


#17

Here is my example can you help me fix it please :pensive:


#18

Something like that?

by the way, it is nothing to do with Ionic, this is Angular/javascript question


#19

Yes , but the my array I want to get is in my factory , How can we declare the array from the factory and call it into the inputbox ?

<input production-qty="call The Arrays here and it's index" type="text" maxlength="20" ng-model="qty1">

This is my array factory
.factory(‘QuestionFactory’,function() {

   var questions = [
    {
        
            pattern: "RO RORPOEAT", // I tried to insert pattern as my object 
            answer: "or operator"
           
        },
        {
       
            pattern: "UARNGLA",
            answer: "angular"
          
        },
        {
        
            pattern: "AAJVRTSCIP",
            answer: "javascript"
            
        },

 ];

return {

    getQuestion: function(id) {
       
        if(id < questions.length) {
            return questions[id];
            
        } else {
            return false;
        }
    },
    questions : questions


};

#20

Like that?


#21

Yes, can you do with the specific index of an array ? like this :smile:

this is the array index 1

production-qty="myarray[1]"

this is the array index 2

production-qty="myarray[2]"