Verification for collaborative element

Question

Verification for collaborative element

I am currently working on creating a shared component for file uploads that can be reused whenever necessary. Interestingly, when I include the file upload code in the same HTML as the form, the validation functions properly. However, if I extract it into a separate component, the validation fails to work.

It is important to note that I only want to implement validation for files in certain components and not in others.

Please refer to this StackBlitz link to see the code example I have been experimenting with:

<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>

angular typescript

Answer 1

Answer №1

To accomplish this task, you can utilize helper services along with a straightforward Subject without making extensive changes to your existing code.

For instance, consider a service called FileService that contains a Subject which can be accessed in the main component when the user clicks on the Save button.

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

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

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

In the main component, you can inform the shared component by invoking the next method on the FileService Subject instance.

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);
  }

Subsequently, you can listen for events emitted by this Subject in your shared component and verify errors by marking FormControls as touched.

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

You can access the functional code sample here: https://stackblitz.com/edit/angularfi-leupload-xfpdfr

Answer 2

To accomplish this task, you can utilize helper services along with a straightforward Subject without making extensive changes to your existing code.

For instance, consider a service called FileService that contains a Subject which can be accessed in the main component when the user clicks on the Save button.

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

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

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

In the main component, you can inform the shared component by invoking the next method on the FileService Subject instance.

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);
  }

Subsequently, you can listen for events emitted by this Subject in your shared component and verify errors by marking FormControls as touched.

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

You can access the functional code sample here: https://stackblitz.com/edit/angularfi-leupload-xfpdfr

Answer 3

Answer №2

After setting up the ViewChild for SharedfileComponent like this:

@ViewChild(SharedfileComponent) child1Component: SharedfileComponent;

You can simply call the validation from there using:

this.child1Component.formFiles.invalid

or

this.child1Component.formFiles.valid

To integrate it into your onSubmitFarmLocation method, just add the following code:

 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:

If you want to display error messages in the shared component, ensure that you are using isSubmitted correctly in both HTML and TypeScript files. Refactor your onSubmitFarmLocation() method to return a boolean value based on form validity.

In sharedfile.component.ts:

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

Then, in your component's submit logic, utilize this updated method like so:

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)
}

For an updated demonstration, refer to this StackBlitz link: https://stackblitz.com/edit/angularfi-leupload-hvlegz

Answer 4

After setting up the ViewChild for SharedfileComponent like this:

@ViewChild(SharedfileComponent) child1Component: SharedfileComponent;

You can simply call the validation from there using:

this.child1Component.formFiles.invalid

or

this.child1Component.formFiles.valid

To integrate it into your onSubmitFarmLocation method, just add the following code:

 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:

If you want to display error messages in the shared component, ensure that you are using isSubmitted correctly in both HTML and TypeScript files. Refactor your onSubmitFarmLocation() method to return a boolean value based on form validity.

In sharedfile.component.ts:

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

Then, in your component's submit logic, utilize this updated method like so:

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)
}

For an updated demonstration, refer to this StackBlitz link: https://stackblitz.com/edit/angularfi-leupload-hvlegz

Verification for collaborative element

Answer №1

Answer №2

Similar questions

Provider in Angular2 that relies on multiple other Providers

Tips on converting a date string in the format 'dd/MM/yyyy' to a date type using TypeScript

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

The error message indicates that the 'aboutData' property is not found within the 'never[]' data type

Is it possible to combine TypeScript modules into a single JavaScript file?

Supporting right-to-left (RTL) localization in Angular 2 and later versions

Generate a data type automatically based on an Array

A step-by-step guide on customizing the background color of a Dialog in Angular Material (Version 16)

Implementing a dependent <select> within an HTML table is a useful feature to enhance user experience and organization of

The argument with type 'void' cannot be assigned to a parameter with type 'Action'

Updating Angular model remotely without relying solely on the controller

Angular HTTP Requests with Observables

What is the reason behind the equality comparison between number[][number] and number in TypeScript?

Can you please provide a step-by-step guide for using socket.io with TypeScript and webpack, after installing it

I am looking to update the color based on the prop value in React

Path for WebStorm file watcher's output

A guide on implementing RxJS Observables to target a specific DIV element

Assign a value to ReplaySubject if it is currently devoid of any

Discovering the file system with window.resolveLocalFileSystemURL in Typescript for Ionic 3

What is the process for invoking an External Javascript Firestore function within a Typescript file?