将表单验证添加到我的输入中

Question

我需要在输入中添加验证，然后尝试添加： （https://angular.io/guide/form-validation）

<label for="name">Name</label>

<input type="text" id="name" class="form-control"
       required minlength="4" maxlength="24"
       name="name" [(ngModel)]="hero.name"
       #name="ngModel" >

<div *ngIf="name.errors && (name.dirty || name.touched)"
     class="alert alert-danger">
    <div [hidden]="!name.errors.required">
      Name is required
    </div>
    <div [hidden]="!name.errors.minlength">
      Name must be at least 4 characters long.
    </div>
    <div [hidden]="!name.errors.maxlength">
      Name cannot be more than 24 characters long.
    </div>
</div>

到我的输入，但他不工作我试图得到我的信息，但是被隐藏的，所以我需要说明这是什么步骤

如果您需要我的代码以获得更多理解：

＃Input.html＃

  <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'}}">
    <input
      #inputField
      *ngIf="!multiline"
      class="input-container__input"
      [(ngModel)]="model"
      (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"
      #name="ngModel"
    />
    <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"
      ></textarea>
    </div>
  </div>
  <div class="input-container__hints" *ngIf="this.theme !== 'inline'">
    <div class="input-container__hints--left">

      <div *ngIf="name.errors && (name.dirty || name.touched)"
           class="alert alert-danger">
        <div [hidden]="!name.errors.required">
          {{anotherValidationHints.required}}
        </div>
        <div [hidden]="!name.errors.minlength">
          Name must be at least 4 characters long.
        </div>
        <div [hidden]="!name.errors.maxlength">
          Name cannot be more than 24 characters long.
        </div>
      </div>
    </div>
    <div class="input-container__hints--right" *ngIf="withCharCount">
      {{(model?.length || 0) + (maxlength ? ('/' + maxlength) : '')}}
    </div>
  </div>
</div>

和＃Input.component.ts＃

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

  anotherValidationHints = {
    required: 'Required field! Please complete the field',
    maxlength: 'test Max length',
    minlength: 'test Min length',
    pattern: 'please respect syntaxe of pattern '
  }

  errors = {
    required: true
  }

  @Input() isValidationHintsActive: boolean = true

  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
  }

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