Проверка для общего компонента

Question

Я пытаюсь создать общий компонент для загрузки файлов, чтобы использовать его при необходимости. Если я помещаю свой код загрузки файла в тот же html формы, проверка работает. Если я сделаю это отдельным компонентом, проверка не будет работать.

Примечание: я хочу использовать проверку файла в некоторых компонентах и ​​не хочу проверять в других компонентах

Вот рабочий stackblitz кода, который я пробовал

<form [formGroup]="formLocation" (ngSubmit)="onSubmitFarmLocation()">
    <div class="form-row">
        <div class="form-group col-sm-4">
            <label>Property Identification Number</label>
            <input class="form-control" type="text" formControlName="propertyIdentificationNumber"
                            [class.invalid]="!formLocation.controls['propertyIdentificationNumber'].valid && formLocation.controls['propertyIdentificationNumber'].touched " >
            <div
                *ngIf="!formLocation.controls['propertyIdentificationNumber'].valid && (formLocation.controls['propertyIdentificationNumber'].touched || isSubmitted)">
                <div class="invalid-feedback" style="display: block;">Please enter property identification
                    Number
                </div>
            </div>
        </div>
        <hr>
        <app-sharedfile></app-sharedfile>
        <div class="form-row">
            <div class=" ml-auto pb-3">
                <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
        </div>
    </div>
</form>

Answer 1

Вы можете добиться этого с помощью вспомогательных служб и простого объекта Subject, не внося особых изменений в текущий код.

У меня есть служба FileService, у которой есть Subject, которую вы можете использовать в основном компоненте, когда пользователь нажмите кнопку «Сохранить».

export class FileService {
  checkFileUploadSubject = new Subject<boolean>();

  setCheckFileUploadValidity() {
    this.checkFileUploadSubject.next(true);
  }

  checkFileUploadValidity(): Observable<boolean> {
    return this.checkFileUploadSubject.asObservable();
  }
}

В вашем основном компоненте вы можете уведомить общий компонент, вызвав метод next для этого экземпляра FileService Subject.

app.component.ts
 onSubmitFarmLocation() {
    this.isSubmitted = true;
    this.isShowErrors = true;
    this.fileService.setCheckFileUploadValidity();
    if (this.formLocation.invalid) {
      return;
    }

    console.log(this.formLocation.value, this.formLocation.errors);
  }

Затем вы можете прослушать события, генерируемые этим Subject в вашем общем компоненте, и проверьте наличие ошибок, пометив FormContrls как затронутые.

ngOnInit() {
    this.fileService.checkFileUploadValidity().subscribe(value => {
      debugger;
      this.formLocation.markAllAsTouched();
    });
  }

Рабочий код можно найти здесь: https://stackblitz.com/edit/angularfi-leupload-xfpdfr

Answer 2

Поскольку у вас уже есть

@ViewChild(SharedfileComponent) child1Component: SharedfileComponent; 

, вам просто нужно вызвать проверку оттуда, поэтому вы можете просто использовать:

this.child1Component.formFiles.invalid или this.child1Component.formFiles.valid

поэтому просто добавьте это в свой метод onSubmitFarmLocation:

 onSubmitFarmLocation() {
    this.isSubmitted = true;
    this.isShowErrors = true;
    if (this.formLocation.invalid ) {
      return;
    }
    if (this.child1Component.formFiles.invalid) {
      console.log('form file invalid');
      return;
    }
    console.log(this.formLocation.value, this.formLocation.errors)
  
  }

update:

, если вы хотите отображать сообщения об ошибках в общем компоненте, сначала вы использовали isSubmitted в вашем html, но не в вашем ts, поэтому он никогда не будет отображаться. сложная часть - make onSubmitFarmLocation() для возврата логического значения, и от него зависит, может ли отправка продолжаться или нет.

sharedfile.component.ts

onSubmitFarmLocation(): Boolean {
    this.isSubmitted = true;
    return this.formLocation.valid;  
  }

и в вашем компоненте, во время отправки используйте его как:

onSubmitFarmLocation() {
  this.isSubmitted = true;
  this.isShowErrors = true;
  this.child1Component.onSubmitFarmLocation();
   
  if (this.formLocation.invalid ) {
    return;
  }
  if (this.child1Component.formLocation.invalid) {
    return;
  }

  console.log(this.formLocation.value, this.formLocation.errors)
}

обновленный stackblitz https://stackblitz.com/edit/angularfi-leupload-hvlegz