Verify the attribute of the child element

Question

Verify the attribute of the child element

In my child component, I have a property named files, which is an input type=file. This property allows me to determine if the user has selected a file for upload so that I can disable the submit button if no files are present in the input field. The issue I'm facing now is that the submit button is located in the parent component, making it challenging to access the files property to enable the button when a file is selected.

Is there a way for me to access the files property from the parent component and check if a file is present in the input field?

I've attempted using the @ViewChild decorator with something like this.childComponent.files, but I keep getting 'undefined'. I also tried using @Output without success.

Added code:

Parent Component TypeScript:

(Code example same as above)

Parent Component HTML:

(Code example same as above)

Children Component TypeScript:

(Code example same as above)

Children Component HTML:

(Code example same as above)

Edit #2:

html parent:

<app-step-one #StepOneComponent></app-step-one>

ts parent:

(Code example same as above)

ts child added:

(Code example same as above)

I also tried this.stepOneComponent.files;, but it did not work. However, creating a getFiles() function in the child component allowed me to retrieve the file data successfully. My goal now is to automatically detect changes instead of relying on a manual function triggered by a button click.

Edit #3 (for duplicate):

The solution provided in another question does not suit my needs as I require automatic change detection rather than manual intervention.

javascript angular typescript

Answer 1

Answer №1

Incorporate public elements like isValid in your child class, as well as possibly a

$valid: BehaviorSubject<boolean>

that can be accessed using @ViewChild within the parent component.

@Component({ 
    selector: 'parent-component',
    template: '<child-component #childComponent></child-component>'
})
export class ParentComponent implements AfterViewInit {
    @ViewChild('childComponent') childComponent: ChildComponent;

    ngAfterViewInit(): void {
        // Perform necessary actions here to ensure availability of @ViewChildren
        this.childComponent.$valid.subscribe(isValid => {
             // Handle validity related tasks
        })
    }
}

UPDATE: Upon reviewing your code, it seems there is an issue with your @ViewChild implementation:

@ViewChild(StepOneComponent) stepOneComponent: StepOneComponent;

This does not function correctly. The decorator is unable to find anything labeled as #StepOneComponent in your parent component markup.

In your markup, you should have:

<app-step-one #StepOneComponent></app-step-one>

And in your class:

@ViewChild('StepOneComponent') stepOneComponent: StepOneComponent;

Additional UPDATE:

@ViewChild('thisIsADecorator') someVariableName: SomeComponentClass;

Acts as a reference to:

<child-component #thisIsADecorator></child-component>

This represents an instance of a SomeComponentClass with a selector of child-component. Using AfterViewInit is necessary because the child component will not be accessible immediately; according to Angular's documentation:

ngAfterViewInit() Respond after Angular initializes the component's views and child views.

The line

@ViewChild(StepOneComponent) stepOneComponent: StepOneComponent;

in your parent class does not perform any action.

Your parent markup:

<td-steps>
  <td-step #step1 sublabel="Upload a copy of the front part of your ID Card" [active]="true" [disabled]="false" (activated)="activeStep1Event()" [state]="stateStep1" (deactivated)="deactiveStep1Event()">
      <ng-template #head1 td-step-label><span>ID Card Photo (I)</span></ng-template>
      <app-step-one></app-step-one>// <---- This is the view child you're trying to get a handle on, but there is nothing for Angular to use to find it
  </td-step>

If these adjustments are made, your current approach will work effectively.

Further EDIT for exposing property getter

The key here is that you have connected your td-file-input with ngModel linked to a property files in StepOneComponent. To establish a change listener, utilize a getter/setter for files.

private _files: any;
private $_files: BehaviorSubject<any> = new BehaviorSubject();

public get files(): any {
    return this._files;
}

public set files(val: any) {
    this.$_files.next(this._files = val);
}

public get $files(): Observable<any> {
    return this.$_files.asObservable();
}

Then in your parent component:

ngAfterViewInit() { // <-- Suggest switching to this from ngOnInit
    this.stepOneComponent.$files.subscribe((newVal: any) => {
        console.log(newVal);
        // Implement required actions
    });
}

Answer 2

Incorporate public elements like isValid in your child class, as well as possibly a

$valid: BehaviorSubject<boolean>

that can be accessed using @ViewChild within the parent component.

@Component({ 
    selector: 'parent-component',
    template: '<child-component #childComponent></child-component>'
})
export class ParentComponent implements AfterViewInit {
    @ViewChild('childComponent') childComponent: ChildComponent;

    ngAfterViewInit(): void {
        // Perform necessary actions here to ensure availability of @ViewChildren
        this.childComponent.$valid.subscribe(isValid => {
             // Handle validity related tasks
        })
    }
}

UPDATE: Upon reviewing your code, it seems there is an issue with your @ViewChild implementation:

@ViewChild(StepOneComponent) stepOneComponent: StepOneComponent;

This does not function correctly. The decorator is unable to find anything labeled as #StepOneComponent in your parent component markup.

In your markup, you should have:

<app-step-one #StepOneComponent></app-step-one>

And in your class:

@ViewChild('StepOneComponent') stepOneComponent: StepOneComponent;

Additional UPDATE:

@ViewChild('thisIsADecorator') someVariableName: SomeComponentClass;

Acts as a reference to:

<child-component #thisIsADecorator></child-component>

This represents an instance of a SomeComponentClass with a selector of child-component. Using AfterViewInit is necessary because the child component will not be accessible immediately; according to Angular's documentation:

ngAfterViewInit() Respond after Angular initializes the component's views and child views.

The line

@ViewChild(StepOneComponent) stepOneComponent: StepOneComponent;

in your parent class does not perform any action.

Your parent markup:

<td-steps>
  <td-step #step1 sublabel="Upload a copy of the front part of your ID Card" [active]="true" [disabled]="false" (activated)="activeStep1Event()" [state]="stateStep1" (deactivated)="deactiveStep1Event()">
      <ng-template #head1 td-step-label><span>ID Card Photo (I)</span></ng-template>
      <app-step-one></app-step-one>// <---- This is the view child you're trying to get a handle on, but there is nothing for Angular to use to find it
  </td-step>

If these adjustments are made, your current approach will work effectively.

Further EDIT for exposing property getter

The key here is that you have connected your td-file-input with ngModel linked to a property files in StepOneComponent. To establish a change listener, utilize a getter/setter for files.

private _files: any;
private $_files: BehaviorSubject<any> = new BehaviorSubject();

public get files(): any {
    return this._files;
}

public set files(val: any) {
    this.$_files.next(this._files = val);
}

public get $files(): Observable<any> {
    return this.$_files.asObservable();
}

Then in your parent component:

ngAfterViewInit() { // <-- Suggest switching to this from ngOnInit
    this.stepOneComponent.$files.subscribe((newVal: any) => {
        console.log(newVal);
        // Implement required actions
    });
}

Verify the attribute of the child element

Answer №1

Similar questions

Angular app experiences a breakdown due to a JitCompiler issue

Resolving the issue of 'type' property missing but required in 'SeriesXrangeOptions' within the Angular Highcharts module

Display a pop-up window when hovering over a table cell using HTML and JavaScript

What are the steps to display JSON data within an HTML div?

Guide to iterating within a loop with a variable number of iterations above or below the specified amount in JavaScript

Error: The $filter function in AngularJS is not recognized

Steps to Turn Off Automatic Loading in Jquery Ajax tabs

Can you help me with sorting asynchronous line points for KineticJS?

Creating a message factory in Typescript using generics

Implementing yadcf and a fixed column filter in a Bootstrap datatable

Obtain the text from an altered stylesheet in Firefox

Utilizing external functions in Node.js by importing them from different files

Enhancing State Management with Multiple @Select Decorators in NGXS

How to Implement Autocomplete Feature in Angular

Highlight main title in jQuery table of contents

Unusual shift in behavior - <input> on Windows 8.1

Modify form layout upon selection of a specific radio button

Using logical equality operators in Javascript

Is there a way to display my current connected clients to a new client using socket.io?

Running Controllers from Other Controllers in AngularJS: A Guide