Как я могу запретить NgModel устанавливать недопустимые значения элемента управления формы? - PullRequest
Новая
       47

Как я могу запретить NgModel устанавливать недопустимые значения элемента управления формы?

0 голосов
/ 08 января 2020

Как я могу запретить NgModel устанавливать недопустимые управляемые шаблоном значения элементов управления формы? Я проверил, что NgModel будет устанавливать недопустимые значения при двусторонней привязке к экземпляру модели. Я знаю, что могу создать копию экземпляра модели, но у меня может быть сценарий ios, в котором подход сохранения / возврата не подходит.

https://stackblitz.com/edit/angular-gcu9mz

@Component({
  selector: 'my-app',
  template: `
    Enter an invalid value (less than 14 characters).
    <br><br>
    <label for="input">Input:</label>
    <input #input="ngModel" type="text" minlength="14" [(ngModel)]="value" 
      placeholder="Enter an invalid value">
    Valid: {{input.valid}}
    <br>
    Model value: {{value}}
`
})
export class AppComponent  {
  value = 'Invalid value';
}

Я нашел много связанных вопросов для AngularJS, где, как говорят, ngModelOptions поддерживает конфигурацию allowInvalid, которая изменяет поведение по умолчанию. Однако это не поддерживается в NgModel Angular.

Не записывать недопустимые значения с помощью ng-модели

Как предотвратить недопустимость модели?

Меня не интересует обсуждение 1022 * о том, является ли принятие, отображение или установка недопустимых значений хорошей практикой, а также не должна ли модель быть "источником" истины ", так как мои требования всегда зависят от приложения и варианта использования.

Ответы [ 3 ]

1 голос
/ 08 января 2020

Вы можете использовать геттер, чтобы обернуть логи валидации c. Как то так: 

@Component({
 selector: 'my-app',
 template: `
   Enter an invalid value (less than 14 characters).
   <br><br>
   <label for="input">Input:</label>
   <input #input="ngModel" type="text" minlength="14" [(ngModel)]="modelValue" 
   placeholder="Enter an invalid value">
   Valid: {{input.valid}}
   <br>
   Model value: {{modelValue}}`
})

export class AppComponent  {
 get modelValue() {
   let value;

   // validation logic to ensure value is valid

   return value; // valid value
 }
}

set modelValue(value) {
  //set value logic
}
0 голосов
/ 09 января 2020

Расширяя ответ alexortizl , я решил использовать геттеры и сеттеры, но не дублировать логи проверки c. Я использовал Состояние валидации FormControl для предотвращения установки недопустимых значений в модели.

https://stackblitz.com/edit/angular-5xkael

@Component({
  selector: 'my-app',
  template: `
    <label for="input">Input:</label>
    <input #input="ngModel" type="text" minlength="14" [(ngModel)]="value">
`
})
export class AppComponent  {
  @ViewChild('input', { static: true }) input: NgControl;

  // Allow an initial invalid value.
  private _value = 'Invalid value';
  get value() { return this._value; }

  set value(value: string) { if (this.input.valid) this._value = value; }
}
0 голосов
/ 08 января 2020

из документов

Чтобы добавить проверку в управляемую шаблоном форму, вы добавляете те же атрибуты проверки, что и при проверке формы native HTML . Angular использует директивы для сопоставления этих атрибутов с функциями валидатора в каркасе.

В ссылке, о минимальной длине, скажем

Количество символов (кодовых точек) должно быть не может быть меньше значения атрибута, если не пусто .

Можно использовать 

<input required minlength="14 ....>
...