Почему не работает валидация кастомного FormControl?

Question

[FNY3PM]

Есть родительский компонент с формой:

<form [formGroup]="authFormGroup">
        <p>
            <small class="title">Логин</small>
            <app-input [phone]="true" formControlName="login"></app-input>
            <small class="error">Введите корректный логин</small>
        </p>
    </form>

В котором создается форма и добавляется FormControl:

this.authFormGroup = new FormGroup({
      'login': new FormControl('', [Validators.required, Validators.minLength(5)])
    })

login FormControl - это отдельный текстовый компонент, которому я написал код, чтобы он работал, как FormControl.

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.sass'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements OnInit, ControlValueAccessor {

  @Input('phone') isShowingPhone: boolean = false
  value: string = ''

  constructor() {
  }


  onChange: any = () => { };
  onTouched: any = () => { };

  writeValue(value: string): void {
    this.value = value
  }
  registerOnChange(fn: any): void {
    this.onChange = fn
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn
  }

  ngOnInit(): void {
  }

  update(): void {
    this.onChange(this.value)
  }


}

И все работает, за исключением валидаторов. Элементу input внутри моего app-input компонента добавляется ng-touched и ng-dirty, но как можно добавить ему ng-invalid, если валидаторы из form group сработали?

Answer 1

[Sun_Day]

У твоего контрола по дефолту должен быть status: valid/invalid и errors: null, если валидация не задана, и errors: {тут объект с заданными тобой валидаторами} если валидация задана.
1) Покажи темплейт инпута.
2) Возможно ты не там смотришь ошибку валидации, или судя по твоему темплейту, ты ее вообще не смотришь и непонятно какого поведения ожидаешь. Судя по тому, что ты скинул, за статусом твоей валидации можно следить по такому пути:

{{ authFormGroup.controls.login.errors?.minlength.requiredLength }}

Comments

[FNY3PM]

Я могу так следить за ошибкой, валидация происходит, но внутри input component, который я использую, как FromControl в AuthComponent, текстовому инпуту не добавляется класс ng-invalid, если authFormGroup.controls.login.errors содержит ошибки. ng-touched и ng-dirty добавляются. Отсюда вопрос: как сделать добавление и ng-invalid?

[Sun_Day]

FNY3PM, попробуйте к инпуту добавить required

<input (ngModelChange)="chtoto" required>

И ловить ng-invalid у app-input.