@FNY3PM

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

Есть родительский компонент с формой:
<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 сработали?
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Sun_Day
У твоего контрола по дефолту должен быть status: valid/invalid и errors: null, если валидация не задана, и errors: {тут объект с заданными тобой валидаторами} если валидация задана.
1) Покажи темплейт инпута.
2) Возможно ты не там смотришь ошибку валидации, или судя по твоему темплейту, ты ее вообще не смотришь и непонятно какого поведения ожидаешь. Судя по тому, что ты скинул, за статусом твоей валидации можно следить по такому пути:
{{ authFormGroup.controls.login.errors?.minlength.requiredLength }}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
18 мая 2021, в 01:31
3000 руб./за проект
17 мая 2021, в 23:39
50000 руб./за проект
17 мая 2021, в 23:10
100000 руб./за проект