ngIf с элементами управления валидацией - PullRequest
Новая
       22

ngIf с элементами управления валидацией

0 голосов
/ 31 октября 2019

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

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

Эта логика скрытия и показа работает безупречно. Однако элемент dom, отвечающий за отображение сообщений проверки, выдает ошибку, когда элемент управления не найден. 

<span class="form-control-readonly" *ngIf="readonly == true" #valuelabel>
 {{inputModel}}
</span>

<input 
    *ngIf="readonly != true" 
    #control="ngModel" 
    [id]="id" 
    type="text" 
    class="form-control" 
    [placeholder]="caption" 
    [(ngModel)]="inputModel" 
    (ngModelChange)="onTextChange()" 
    [maxlength]="maxLength"
    [required]="isRequired === true ? '' : null"  
    [ngClass]="{'invalid': !control.valid, 'valid': control.valid }"> 

 <div *ngIf="(readonly == false) && (control.invalid && hideFeedback === false)" class="invalid-feedback">
     <div *ngIf="(readonly == false) && (control.errors.required)">{{ caption }} is required</div>
     <div *ngIf="(readonly == false) && (control.errors.maxlength)">{{ caption }} should be {{ control.errors.maxlength.requiredLength }} characters long </div>        
 </div>

control.errors в последнем div вызывает ошибку «Не удается прочитать свойство 'invalid' of undefined" ». Вероятно, потому что контроль не существует в дом.

Когда ngIf на входе изменяется на скрытый, он начинает работать, но я хочу добиться этого с помощью ngIf.

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

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

<span class="form-control-readonly" *ngIf="readonly == true" #valuelabel>
 {{inputModel}}
</span>

<div *ngIf="readonly != true">
    <input 
        #control="ngModel" 
        [id]="id" 
        type="text" 
        class="form-control" 
        [placeholder]="caption" 
        [(ngModel)]="inputModel" 
        (ngModelChange)="onTextChange()" 
        [maxlength]="maxLength"
        [required]="isRequired === true ? '' : null"  
        [ngClass]="{'invalid': !control.valid, 'valid': control.valid }"> 

    <div *ngIf="(readonly == false) && (control.invalid && hideFeedback===false)" class="invalid-feedback">
        <div *ngIf="(readonly == false) && (control.errors.required)">{{ caption }} is required</div>
        <div *ngIf="(readonly == false) && (control.errors.maxlength)">{{ caption }} should be {{ control.errors.maxlength.requiredLength }} characters long </div>        
    </div>
</div>
0 голосов
/ 31 октября 2019

Как я вижу ваш код, вы можете улучшить его, сделав readOnly логическим значением, а не сравнивать. Вы можете обернуть весь свой код создания элемента управления в один * ngIf 

<span *ngIf="readonly" class="form-control-readonly" #valuelabel>
 {{inputModel}}
</span>

<div *ngIf="!readonly">
  <input #control="ngModel" [id]="id" type="text"
         class="form-control" [placeholder]="caption"
         [(ngModel)]="inputModel" (ngModelChange)="onTextChange()"
         [maxlength]="maxLength"
         [required]="isRequired === true ? '' : null"
         [ngClass]="{'invalid': !control.valid, 'valid': control.valid }">

  <div *ngIf="(control.invalid && hideFeedback ===  false)" class="invalid-feedback">
    <div *ngIf="(control.errors.required)">{{ caption }} is required</div>
    <div *ngIf="(control.errors.maxlength)">{{ caption }} should be {{ control.errors.maxlength.requiredLength }} characters long</div>
  </div>
</div>
...