Zustand blockieren meine Form Validierung

Question

Hallo Ich habe seit mehreren Tagen auf dieses Problem blockiert

ich Ihnen erklären, ich habe einen Eingang oder beantrage ich eine Nachricht nach einer Bedingung jedoch habe ich eine andere Bedingung, die sagt, wenn es ein mehrzeiliges Text verwendet, um ein Textfeld, wenn es ein Inline einen Eingang

wenn ich meine Bedingung gesetzt * ist zu verwenden ngIf = „mehrzeiligen!“ in meinem Eingang habe ich ein Problem, das ich die Fehlermeldung habe:

Can nicht lesen Eigenschaft 'Fehler' von undefined

ich etwas angewandt habe, habe ich meinen Input einschließlich mein Zustand in einem div kapseln und ich so, fügen MyModel & & myModel.error so dass das Objekt initialisiert wird

nichts funktioniert

wenn jemand eine Lösung habe ich

interessiert bin ist mein 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> 

danke

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() 
     } 
    } 
    } 
}