Ошибка CSS проверки AngularJs

Question

Ошибка CSS проверки AngularJs

0

У меня есть код ниже, который генерирует 3 текстовых поля. Теперь проблема в том, что когда я нажимаю на одно из текстового поля, все текстовые поля 3 фокусируются, хотя у них разные значения имени и метки.

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">

    <div class="col-md-2" style="padding:0px; margin-right:1%;">
        <p style="font-size:11px;">P no {{dohPolicy}} </p>
    </div>
    <div class="form-group col-md-6"  
            data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
                             "has-success": dohForm.dohPolicy.$valid,
                             "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
                             "is-empty": !dohForm.dohPolicy.$viewValue }' 
                             style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
        <label for="dohPolicy"></label>
        <input type="text" name="dohPolicy"
                    data-ng-model="dohPolicy" required readonly
                    data-ng-blur='dohForm.dohPolicy.hasFocus=false'
                    data-ng-focus='dohForm.dohPolicy.hasFocus=true'>
        <p data-ng-show="dohForm.dohPolicy.$error.required && (dohForm.dohPolicy.$touched || submitted)"
                class="error-block">
           P Number(s)
        </p>
    </div>
</div>

Хотя я также пытался использовать строковые массивы, но не смог решить проблему. Я хочу, когда я нажимаю на определенное текстовое поле, только текстовое поле должно фокусироваться и выделяться.

Любая помощь приветствуется!

благодаря

shreyansh 15 сен. 2016, в 07:10

Источник

1

Можете ли вы создать фрагмент кода в codepen.
Sharan De Silva 15 сен. 2016, в 04:37

Теги:

html

angularjs

css

validation

ng-class

3 ответа

Ещё вопросы

Можете ли вы создать фрагмент кода в codepen.

jaguwalapratik · Answer 1 · 2016-09-15T03-22-00.000Z

Поскольку @Riyaj предположил, что все элементы управления входными данными имеют одну и ту же модель, одно и то же имя, поэтому все становятся грязными одновременно

Имя для контроля должно быть уникальным в форме.

Вы должны указать другое имя для каждого элемента управления вводом.

<form role="form" novalidate name="vm.form">
  <div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">
      <div class="col-md-2" style="padding:0px; margin-right:1%;">
          <p style="font-size:11px;">P no {{dohPolicy}} </p>
      </div>
      <div class="form-group col-md-6"  
      data-ng-class='{ "has-focus": dohForm.dohPolicy[{{dohPolicy}}].hasFocus,
              "has-success": dohForm.dohPolicy[{{dohPolicy}}].$valid,
              "has-error": dohForm.dohPolicy[{{dohPolicy}}].$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
              "is-empty": !dohForm.dohPolicy[{{dohPolicy}}].$viewValue }' 
              style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
          <label for="dohPolicy">
          </label>
      <input
          type="text" name="dohPolicy[{{dohPolicy}}]"
          data-ng-model="dohPolicy" required
          data-ng-blur='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=false'
          data-ng-focus='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=true' 
          class="form-control"
          >
          <p
          data-ng-show="dohForm.dohPolicy[{{dohPolicy}}].$error.required && (dohForm.dohPolicy[{{dohPolicy}}].$touched || submitted)"
          class="error-block">P Number(s)</p>
      </div>
    </div>
</form>

Надеюсь, что это поможет вам..

Sharan De Silva · Answer 2 · 2016-09-15T03-07-00.000Z

Использовать $ index в атрибуте имени и динамически проверять

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">

    <div class="col-md-2" style="padding:0px; margin-right:1%;">
        <p style="font-size:11px;">P no {{dohPolicy}} </p>
    </div>
    <div class="form-group col-md-6"  
    data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
        "has-success": dohForm.dohPolicy.$valid,
        "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
        "is-empty": !dohForm.dohPolicy.$viewValue }' 
        style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
        <label for="dohPolicy">
        </label>
    <input
        type="text" name="dohPolicy_{{$index}}"
        data-ng-model="dohPolicy" required readonly
        data-ng-blur='dohForm.dohPolicy.hasFocus=false'
        data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
        >
        <p
        data-ng-show="dohForm['dohPolicy_' + $index].$error.required && (dohForm.dohPolicy.$touched || submitted)"
        class="error-block">P Number(s)</p>
    </div>

</div>

Я пробовал вышеуказанное решение, все еще не работает, ошибка: $ parse: синтаксическая ошибка синтаксиса
Я создал поршень. пожалуйста, проверьте plnkr.co/edit/hPTwxyjzLbGNpmd8VI4y?p=preview

RIYAJ KHAN · Answer 3 · 2016-09-15T02-37-00.000Z

<input type="text" name="dohPolicy"
                                data-ng-model="dohPolicy" required readonly
                                data-ng-blur='dohForm.dohPolicy.hasFocus=false'
                                data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
                                >

Здесь все входные тексты генерируются динамически, используют share the same model dohPolicy.

Таким образом, all get dirty at the same time and emit the blur & focus event они all get dirty at the same time and emit the blur & focus event.

Вам нужно добавить уникальное имя модели