Блог

Главная - Вопросы по программированию - Условно установленный тип ввода

Условно установленный тип ввода

#angular

#angular

Вопрос:

В приведенном ниже коде есть ли способ условно задать тип ввода на основе свойства компонента, используя что-то вроде:

<input type="typeof(model[key])"> или [ng-type]="typeof(model[key])" или <input type="typeof(model.key)"> или что-то еще в этом роде?

 <form #myForm="ngForm" (ngSubmit)="sendQuery()">
  <div *ngFor="let key of modelKeys">
      {{key}} 
      <input  #myInput [ng-type]="typeof(model[key])" name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" required *ngIf="key==='q'" appNoSpecialChars/>
      <input  #myInput [ng-type]="typeof(model[key])" name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" minlength = '2' maxlength='4' *ngIf="key==='stars'" appNoSpecialChars />      
      <input  #myInput [ng-type]="typeof(model[key])" name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" *ngIf="key!=='q' amp;amp; key!=='stars'" appNoSpecialChars/> 
      <p *ngIf="!myForm.form.get(key)?.valid" >Not valid</p> 
  </div>
  <button type="submit" [disabled]="!myForm.valid">Submit</button> 
</form>

Комментарии:

1. вы можете попробовать type="{{ typeof(model[key]) }}"

2. Я не думаю, что вы можете использовать typeof выражения внутри шаблона, но вы можете использовать [attr.type] для установки значения атрибута. Вам придется использовать компонентную функцию для вычисления значения.

3. Я не думаю, что вы можете привязать type свойство. Смотрите обсуждение в этом выпуске .

4. @ogTag, спасибо за ваши комментарии. Я попытался реализовать компонентную функцию следующим образом, но для числовых полей она выдает меня objects вместо numbers . Есть идеи относительно того, почему и как исправить? public inputType = (ключ : строка) : string => { console.log(ключ «: » typeof(this.model[ключ])); возвращает typeof(this.model[ключ]); }

Ответ №1:

Вместо привязки к атрибуту type попробуйте использовать структурную директиву типа *ngIf или [ngSwitch] для отображения правильного ввода. Что-то вроде:

 <form>
    <div *ngFor="let key of modelKeys">
    {{key}}
    <ng-container [ngSwitch]="model[key]">
        <input #myInput *ngSwitchCase="'text'" type="text" name="{{key}}" placeholder="Enter {{key}} Here" />
        <input #myInput *ngSwitchCase="'email'" type="email" name="{{key}}" placeholder="Enter {{key}} Here" />
        <input #myInput *ngSwitchCase="'password'" type="password" name="{{key}}" placeholder="Enter {{key}} Here" />
    </ng-container>
</div>
<button type="submit">Submit</button>

Комментарии:

1. это отличный подход к вопросу.