0
することができます:それは私が私の入力に私の条件* ngIf =「!複数行」に設定するとインライン私は、エラーメッセージが問題を抱えている入力
を使用している場合は複数行のテキストは、テキストエリアを使用しましたUndefiniedのプロパティ 'errors'を読み取らない
私は何かを適用している、私はdivの中に私の条件を含む私の入力をカプセル化しており、オブジェクトが初期化されるように、誰場合、私はこのように、mymodelという& & myModel.errorを追加
何も
を働きません
<div class="input-container" [ngClass]="{
'empty-value': !model,
'focus': focus,
'blur': !focus,
'input-container-material': theme !== 'block' && theme !== 'inline',
'input-container-block': theme === 'block',
'input-container-inline': theme === 'inline',
'disabled': disabled}">
<div class="input-container__label color--{{labelColor || 'default'}}" *ngIf="label" (click)="_focusInputField()">
<div class="mi__wrapper mi__wrapper--inline">
<span>{{label}}<span *ngIf="required"> *</span></span>
<i class="mi mi-question" *ngIf="help" [maeTooltip]="help"></i>
</div>
</div>
<div class="input-container__content bg--{{bg || 'default'}} color--{{color || 'default'}} border--{{borderColor || 'default'}}">
<div *ngIf="!multiline">
<input
#inputField
class="input-container__input"
*ngIf="!multiline"
(focus)="onFocus()"
(blur)="onBlur()"
placeholder="{{placeholder}}"
name="{{name}}"
type="{{type || 'text'}}"
pattern="{{pattern}}"
minlength="{{minlength}}"
maxlength="{{maxlength}}"
min="{{min}}"
max="{{max}}"
[required]="required"
autocomplete="{{autocomplete}}"
[disabled]="disabled"
[readonly]="readonly"
[(ngModel)]="model"
#myModel="ngModel"
/>
</div>
<ng-container *ngTemplateOutlet="inputContent"></ng-container>
<div *ngIf="multiline" class="input-container__multiline">
<div class="input-container__input input-container__multiline__place-holder">{{model}}</div>
<textarea
#inputFieldMultiline
class="input-container__input input-container__multiline__input"
[(ngModel)]="model"
(focus)="onFocus()"
(blur)="onBlur()"
placeholder="{{placeholder}}"
name="{{name}}"
minlength="{{minlength}}"
maxlength="{{maxlength}}"
[required]="required"
[disabled]="disabled"
[readonly]="readonly"
#myModel="ngModel"
></textarea>
</div>
</div>
<ng-container *ngTemplateOutlet="inputContent"></ng-container>
{{hint}}
</div>
<ng-template #inputContent>
<div class="input-container__hints" *ngIf="this.theme !== 'inline'">
<div class="input-container__hints--left">
<div *ngIf="myModel && myModel.errors && myModel.touched" class="alert-error">
<div [hidden]="!myModel.errors.required">
<i class="mi mi-warning"></i>
{{ValidationHints.required}}
</div>
<div [hidden]="!myModel.errors.minlength">
<i class="mi mi-warning"></i>
{{ValidationHints.minlength}}
</div>
<div [hidden]="!myModel.errors.maxlength">
<i class="mi mi-warning"></i>
{{ValidationHints.maxlength}}
</div>
<div [hidden]="!myModel.errors.pattern">
<i class="mi mi-warning"></i>
{{ValidationHints.pattern}}
</div>
</div>
</div>
<div class="input-container__hints--right" *ngIf="withCharCount">
{{(model?.length || 0) + (maxlength ? ('/' + maxlength) : '')}}
</div>
</div>
</ng-template>
:私は
興味ソリューションを持っていることは、これは私のコードですありがとう
コンポーネントにTypeScriptコードがありますか?コンポーネントが最初にロードされるときにmyModelが初期化されていないと仮定しています。 –
私のタイプコードは、答えに – ouanounou
です。 – ouanounou