Why does maxlength have no effect?

Issue

<input class="input {{fields[$index].class}}" 
  ng-disabled="field.disabled != ''"  
  ng-required="field.name == zipcode"
  ng-model="fields[$index].value"
  name="{{field.name}}"
  type="{{field.type}}"
  id="{{field.name}}"
  maxlength="6"
>
<label placeholder=" {{field.label}}">

</label>

The attribute maxlength="6" has no effect for me.

I wanted to make it so that no more than 6 characters can be entered into the textbox. However, I can just keep typing numbers, and the textbox shows them.

The user should be able to enter a certain zip code, and these zip codes are always 6 characters in my country and only digits.

The textbox accepts only numbers, that works, but it keeps accepting any amount of numbers / characters.

What is going wrong here?

Thank you!

Edit: Somebody posted my code with the ability to run it, and it works as expected.

It would be great if this question would not be closed so that we can still find out the problem with the original version and post the problem / solution then.

Edit: Here is some more of my code:

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Mein Profil</h5>
                </div>
                <div class="ibox-content">
                    <form>
                        <div ng-repeat="field in fields track by $index" class="form-group row">
                            <div class="col-sm-5">
                               
                                <!-- alert({{field.name}});
                                alert({{field.type}});
                                alert({{fields[$index].class}}); -->
                                <div class="col-sm-10">
                                    <input class="input {{fields[$index].class}}" 
                                    ng-disabled="field.disabled != ''"  
                                    ng-required="field.name == zipcode"
                                    ng-model="fields[$index].value"
                                    name="{{field.name}}"
                                    type="{{field.type}}"
                                    id="{{field.name}}"
                                    ng-maxlength="6"
                                  >
                                  <label placeholder=" {{field.label}}">
                                           
                                  </label>
                                </div>
                            </div>


                            <!-- <div class="col-sm-5">
                               
                                <div class="col-sm-10">
                                    <input class="input {{fields[$index].class}}" 
                                    ng-disabled="field.disabled != ''"  
                                    ng-required="field.name == zipcode"
                                    ng-model="fields[$index].value"
                                    name="{{field.name}}"
                                    type="{{field.type}}"
                                    id="{{field.name}}"
                                    ng-maxlength="6"
                                  >
                                  <label placeholder=" {{field.label}}">
                                           
                                        </label>
                                </div>
                            </div> -->

                            <!-- <div class="col-sm-5">
                               
                               
                                   
                                <div class="col-sm-10">
                                    <input ng-if="fields2[$index].label != 'PLZ'" ng-disabled="fields2[$index].disabled != ''" class="input {{fields[$index].class}}" required='' id="{{fields2[$index].name}}"
                                      
                                    name="{{fields2[$index].name}}" ng-model="fields2[$index].value" type="{{fields2[$index].type}}"
                                    maxlength="255">
                                    <input ng-if="fields2[$index].label == 'PLZ'" ng-disabled="fields2[$index].disabled != ''" class="input {{fields[$index].class}}" required='' id="{{fields2[$index].name}}"
                                        only-numbers
                                        name="{{fields2[$index].name}}" ng-model="fields2[$index].value" type="{{fields2[$index].type}}"
                                        maxlength="255">
                                        <label placeholder=" {{fields2[$index].label}}">
                                           
                                        </label>
                                </div>
                            </div> -->
                        </div>
                        <div  class="form-group row">
                            <div class="col-sm-5">

                                <div class="col-sm-10">
                                    <input  class="input" autocomplete="new-password"
                                        name="new_password" ng-model="new_password"  type="password" id="new_password"
                                        maxlength="255">
                                        <label placeholder=" Neues Passwort">
                                   
                                        </label>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="col-sm-10">
                                    <input  class="input" autocomplete="new-password"
                                        name="confirm_password" ng-model="confirm_password"  type="password" id="confirm_password"
                                        maxlength="255">
                                        <label placeholder=" Neues Passwort bestätigen"></label>
                                   
                                        </label>
                                </div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="col-sm-4 col-sm-offset-2">
                            <!-- <button ng-click="handleActionUpdateProfile()" name="submit" id="create-tan"
                                class="btn btn-primary btn-sm">

                                Profil aktualisieren
                            </button> -->
                            <md-button id="create-tan"  ng-click="handleActionUpdateProfile()" type="submit" class="md-raised md-primary register-btn m-0 px-4">
                                Profil aktualisieren
                            </md-button>
                        </div>
                    </form>


                </div>
            </div>
        </div>
    </div>
</div>

Solution

There must be something else interferring. If you look at the isolated snippet that you posted, it is not possible to enter more than those 6 characters. Check out the following snippet.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<input class="input {{fields[$index].class}}" 
  ng-disabled="field.disabled != ''"  
  ng-required="field.name == zipcode"
  ng-model="fields[$index].value"
  name="{{field.name}}"
  type="{{field.type}}"
  id="{{field.name}}"
  maxlength="6"
>
<label placeholder=" {{field.label}}">

</label>

Answered By - Sebastian Richner