#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. это отличный подход к вопросу.