條件擋住了我的表單驗證

Question

你好，我已經堵了好幾天在這個問題上

我向你解釋我有一個輸入或我根據一些條件申請的消息，但是我必須說，如果它是另一個條件多行文本使用的textarea的，如果它是一個內聯使用輸入

當我在輸入設置我的狀態* ngIf =「多！」我有一個問題我有錯誤消息：

燦未讀取未確定的財產「錯誤」

我已經應用的東西，我有一個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> 

謝謝

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