Блог

В приведенной ниже реактивной форме я добавляю красную рамку вокруг полей ввода, если есть ошибка. Ошибка возникает, когда поля остаются пустыми, и пользователь нажимает кнопку отправки или когда пользователь фокусируется на полях ввода и выходит, ничего не вводя. Посмотрите эту демонстрацию, и вы поймете, что я имею в виду (нажмите tab в поле ввода, и оно отобразит красную рамку, потому что вы коснулись его, и оно осталось пустым) — https://stackblitz.com/edit/angular-ynkf5j

То же самое становится сложнее, когда я создаю пользовательское поле загрузки, где нам нужно скрыть реальный ввод файла для настройки — DEMO https://stackblitz.com/edit/angular-fqzszn Граница ошибки добавляется при вводе файла, когда мы нажимаем «Отправить», ничего не вводя, потому что там нет затронутого, но второй случай (cForm.controls.file.errors?.required amp;amp; cForm.controls.file.touched) не работаетправильно.

Мне нужно найти способ преодолеть это. Можем ли мы сделать это затронутым или есть какой-либо другой способ добиться этого.

   <form [formGroup]="cForm" (ngSubmit)="onSubmit()">
      <input type=text placeholder="name" formControlName="name"
      [ngClass]="{'err-border': (cForm.controls.name.errors?.required amp;amp; cForm.controls.name.touched) || cForm.controls.name.errors?.required amp;amp; submitted}" 
      >
      <br><br><br>
      <input type="file" formControlName="file" id="realInput" style="display: none">
      <button id="fakeBtn"
      [ngClass]="{'err-border': (cForm.controls.file.errors?.required amp;amp; submitted) || (cForm.controls.file.errors?.required amp;amp; cForm.controls.file.touched)}"
      >Upload</button>
      <span id="text">No file selected</span>
      <br><br><br>
      <button type="submit" >Submit</button>
    </form>
  

TS-ФАЙЛ

 import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  cForm: FormGroup;
  submitted = false;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.cForm = this.formBuilder.group({
      name: ['', Validators.required],
      file: ['', Validators.required]
    });
    var realInput = document.querySelector('#realInput');
    var fakeBtn = document.querySelector('#fakeBtn');
    var text = document.querySelector('#text');
    fakeBtn.addEventListener("click", function(){
       // @ts-ignore
      realInput.click();

       })
       realInput.addEventListener("change", function(event) {
       // @ts-ignore
      if(realInput.value) {
         // @ts-ignore
        text.innerHTML = event.target.files[0].name;
      } else {
          text.innerHTML = "No file selected";
      }
       });

  }
onSubmit() {
  this.submitted = true;
  if(this.cForm.invalid) {
    return;
  }
  console.log(this.cForm.value);
}

}
  

событие, которое вам нужно, — это событие фокусировки, после чего мы отмечаем кнопку как нажатую, и ваши существующие проверки вступают во владение оттуда… мы делаем это с помощью 2 изменений в вашем коде

в вашем app.component.ts добавлено:

 focusFunction(){
  this.cForm.controls.file.markAsTouched(); 
}
  

одно изменение в вашем #fakeBtn app.component.html:

 <button id="fakeBtn"
  [ngClass]="{'err-border': (cForm.controls.file.errors?.required amp;amp; submitted) || (cForm.controls.file.errors?.required amp;amp; cForm.controls.file.touched)}"
  (focus)="focusFunction()"
  >Upload</button>
  

полная демонстрация из вашего разветвленного кода здесь