état bloquer ma validation du formulaire

Question

Bonjour je suis bloqué depuis plusieurs jours sur ce problème

je vous explique que j'ai une entrée ou je demande un message selon une certaine condition toutefois je une autre condition qui dit si elle est un texte multiligne utilisé une zone de texte si elle est une ligne d'utiliser une entrée

Quand je mets mon état * ngIf = « multiligne! » dans mon entrée, j'ai un problème je le message d'erreur:

Can pas lire la propriété 'erreurs' de undefinied

J'ai demandé quelque chose, j'encapsule dans un div mon entrée, y compris mon état et je ainsi, ajouter myModel & & myModel.error afin que l'objet est initialisé

rien ne fonctionne

si quelqu'un a une solution, je suis intéressé

c'est mon code:

<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> 

merci

Answer 1

import { 
    ChangeDetectionStrategy, 
    ChangeDetectorRef, 
    Component, 
    ElementRef, 
    forwardRef, 
    Input, 
    OnInit, 
    ViewChild 
} from '@angular/core' 
import { 
    ControlValueAccessor, 
    NG_VALUE_ACCESSOR 
} from '@angular/forms' 
@Component({ 
    selector: 'mae-input', 
    templateUrl: './input.html', 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => InputComponent), 
     multi: true 
    } 
    ], 
    host: { 
    class: 'input-form' 
    } 
}) 
export class InputComponent implements OnInit, ControlValueAccessor { 

    @Input() theme: string = 'material' // 'material' or 'block' or 'inline' 
    @Input() minlength: number 
    @Input() maxlength: number 
    @Input() min: number 
    @Input() max: number 
    @Input() pattern: string 
    // tslint:disable-next-line:no-reserved-keywords 
    @Input() type: string 
    @Input() autocomplete: string 
    @Input() required 
    @Input() disabled 
    @Input() readonly 
    @Input() multiline: boolean 
    @Input() withCharCount: boolean 
    @Input() label: string 
    @Input() name: string 
    @Input() placeholder: string 
    @Input() help: string 
    @Input() hint: string 
    @Input() bg: string 
    @Input() color: string 
    @Input() borderColor: string 
    @Input() labelColor: string 
    @Input() myModel: any 

    ValidationHints = { 

    required: ' Please fill out this field.', 
    minlength: ' Field must be at least 3 characters long.', 
    maxlength: ' Field cannot be more than 24 characters long.', 
    pattern: ' Please match the requested format.' 
    } 
    focus: boolean = false 

    @ViewChild('inputField') 

    private _inputField: ElementRef 

    @ViewChild('inputFieldMultiline') 

    private _inputFieldMultiline: ElementRef 

    private _model: string 

    constructor(private cd: ChangeDetectorRef) { 
    } 

    // tslint:disable-next-line:no-empty 
    onChange: any =() => { 
    } 

    // tslint:disable-next-line:no-empty 
    onTouched: any =() => { 
    } 

    ngOnInit() { 
    this.required = this.required !== undefined && this.required !== false 
    this.disabled = this.disabled !== undefined && this.disabled !== false 
    this.readonly = this.readonly !== undefined && this.readonly !== false 
    this.myModel = '' 
    } 

    get model() { 
    return this._model 
    } 

    set model(val: string) { 
    if (val === this._model) { 
     return 
    } 
    this._model = val 
    this.onChange(val) 
    } 

    writeValue(value: any) { 
    this._model = value 
    this.cd.markForCheck() 
    } 

    registerOnChange(fn: any): void { 
    this.onChange = fn 
    } 

    registerOnTouched(fn: any): void { 
    this.onTouched = fn 
    } 

    onFocus() { 
    if (this.readonly || this.disabled) { 
     return 
    } 
    this.focus = true 
    } 

    onBlur() { 
    if (this.readonly || this.disabled) { 
     return 
    } 
    this.focus = false 
    this.onTouched() 
    } 

    _focusInputField() { 
    if(!this.readonly && !this.disabled) { 
     if (this.multiline) { 
     this._inputFieldMultiline.nativeElement.focus() 
     } else { 
     this._inputField.nativeElement.focus() 
     } 
    } 
    } 
}