Estoy tratando de hacer un componente compartido para cargar archivos para reutilizarlo cuando sea necesario. Si coloco mi código de carga de archivos en el mismo html del formulario, la validación funciona. Si lo hago como componente separado, la validación no funciona.

Nota: Quiero usar la validación para el archivo en algunos componentes y no quiero la validación en otros componentes

Aquí está trabajando stackblitz del código que he probado

<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>
2
Teja 10 jul. 2020 a las 13:25

2 respuestas

La mejor respuesta

Puede lograr esto con la ayuda de servicios auxiliares y un Asunto simple sin hacer muchos cambios en su código actual.

Tengo un servicio FileService que tiene un Asunto que puede usar en el componente principal cuando el usuario hace clic en el botón Guardar.

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

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

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

En su componente principal, puede notificar al componente compartido llamando al siguiente método en esta instancia de 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);
  }

Luego, puede escuchar los eventos emitidos por este Asunto en su componente compartido y verificar los errores marcando FormContrls como tocado.

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

Encuentre el código de trabajo aquí: https://stackblitz.com/edit/angularfi-leupload-xfpdfr

1
PrinceIsNinja 18 jul. 2020 a las 11:07

Como ya tienes

@ViewChild(SharedfileComponent) child1Component: SharedfileComponent; 

Solo necesita llamar a la validación desde allí, por lo que puede usar:

this.child1Component.formFiles.invalid o this.child1Component.formFiles.valid

Así que solo agregue esto en su método 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)
  
  }

actualización:

Si desea mostrar mensajes de error en el componente compartido, primero, usaste isSubmitted en tu html pero no en tus ts, por lo que nunca se mostrará. la parte difícil es hacer onSubmitFarmLocation() para devolver un valor booleano, y depende de ello si el envío puede continuar o no.

Sharedfile.component.ts

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

Y en su componente, durante el envío, úselo como:

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 actualizado https://stackblitz.com/edit/angularfi-leupload-hvlegz

1
Fetrarij 13 jul. 2020 a las 14:17