-2

I need to clear input value from child component. I have dynamic add input and on every next input i see previous added data...I need to clear it..

I am try with ViewChild with:

<app-child-component #clear></app-child-component>

@ViewChild('clear') myDiv!: ElementRef;

but

when i console.log(this.mydiv) i don't see nativeElement.value like a this question:

How can I select an element in a component template?

Example of my console.log is different.... I see:

cdr: ViewRef {_lView: LComponentView_NewPhoneNumberComponent(146), _cdRefInjectingView: LComponentView_NewPhoneNumberComponent(146), _appRef: null, _attachedToViewContainer: false}
control: FormControl {_hasOwnPendingAsyncValidator: false, _parent: null, pristine: true, touched: false, _onCollectionChange: ƒ, …}
currentRegionCode: "US"
disabled: false
id: "number-phone-input"
onChange: (newValue) => {…}
onTouched: () => {…}
placeholder: "Phone Number"
__ngContext__: LComponentView_AddContactAccountComponent(359) [add-contact, TView, 147, LComponentView_ViewDetailComponent(410), null, null, TNode, LCleanup(41), AddContactAccountComponent, {…}, AnimationRendererFactory, BaseAnimationRenderer, null, LContainer(10), LComponentView_NewPhoneNumberComponent(146), LComponentView_ViewDetailComponent(410), LComponentView_AddContactAccountComponent(359), null, 0, LQueries_, div.container.customer-input-row, form.row.ng-untouched.ng-invalid.ng-dirty, div.col-lg-2.col-md-2.col-sm-2, label.customer-title, text, span.text-danger, text, input.form-control.customer-input-field.ng-untouched.ng-pristine.ng-invalid, LContainer(10), LContainer(10), div.col-lg-1.col-md-1.col-sm-2.pl-1, label.customer-title, text, span.text-danger, text, input.form-control.customer-input-field.ng-untouched.ng-pristine.ng-invalid, LContainer(10), LContainer(10), div.col-lg-1.col-md-1.col-sm-2.pl-1, label.customer-title, text, span.text-danger, text, input.form-control.customer-input-field.ng-untouched.ng-pristine.ng-invalid, LContainer(10), LContainer(10), div.col-lg-2.col-md-.col-sm-2.pl-1, label.customer-title, text, span.text-danger, text, input.form-control.customer-input-field.ng-untouched.ng-pristine.ng-invalid, LContainer(10), LContainer(10), div.col-lg-4.col-md-4.col-sm-4, div.row, div.col-12, div.form-row, div.form-group.col-12, label, text, span.text-danger, text, LComponentView_NewPhoneNumberComponent(146), NewPhoneNumberComponent, div.col-lg-1.col-md-1.col-sm-2.pl-1.d-flex.align-items-center, div.icon-div, button#submit-contact-button, i.fas.fa-check-circle.check-icon.cursor-disabled, i.fas.fa-times-circle.cancel-icon, FormGroup, {…}, false, undefined, {…}, false, undefined, {…}, false, undefined, {…}, false, undefined, true, {…}, false, {…}, false, {…}, false, {…}, false, {…}, true, {…}, -2146694656, 512, 0, 0, 0, …]
__proto__: Object

This values.... What ever i need to clear or destory or what ever to clear input data.....

TysonF
  • 17
  • 5

1 Answers1

-1

You have to put it in an appropriate hook, and its:

ngAfterViewInit() {
  console.log(this.myDiv);
}

or you can add

@ViewChild('clear', {static: true}) myDiv!: ElementRef;

and you can use it in other hooks as well

munleashed
  • 1,677
  • 1
  • 3
  • 9
  • No, this is not okay. It doesn't help me. The problem here is probably some deep nesting or i don't know what.. – TysonF Apr 20 '21 at 22:10
  • Create a reproducible scenario in stackblitz or similar, because from your question nobody can know what is happening in your nested components...my friend... – munleashed Apr 20 '21 at 22:20