getting event object while using input and output decorators on properties

Question

While using the @input and @output decorators on properties, I am getting an event object as well as passing object on the output property and an event object replicates the passing object.

Here is the my code.

In Parent component is.

<example [focusOn]="focusOnExample" (change)="checkExampleData($event)"></example>

checkExampleData(example: any){   
    this.starSign = example;  
}

And my child component is

<input type="checkbox" class="custom-control-input" (click)="isExampleClicked($event.target.checked)">

<input type="text" #myInput class="form-control" style="text-transform: uppercase"  formControlName="exxampleNo" [readonly]="!showHide"
                    (keyup)="formResponse(myForm)">



@Component({
    selector: 'example ',
    templateUrl: './child.html',
    styleUrls: ['./child.css']
})
export class ExampleComponent implements OnInit {

    public myForm: FormGroup;
    public showHide: boolean = true;
    public exampleData = {
        exampleValue: "",
        exampleValid: false
    }

    @Input() focusOn: boolean;
    @Output() change: EventEmitter<any> = new EventEmitter<any>();

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.addValidationOnExample();        
    }

    addValidationOnExample() {
        this.exampleData .exampleValid = false;
        this.myForm = this.fb.group({
            panNo: ['', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]]
        });
        this.sendOutput(this.exampleData)
    }

    removeValidation() {
        this.exampleData.exampleValid = true;
        this.myForm = this.fb.group({
            panNo: []
        });
        this.sendOutput(this.exampleData);
    }

    isExampleClicked(value: boolean) {
        this.exampleData.exampleValue = "";
        if (value) {
            this.showHide = false;
            this.removeValidation();                                    
        } else {
            this.showHidePan = true;
            this.addValidationOnExample();
        }
    }

    formResponse(formData: any) {
        if (formData.valid) {
            this.exampleData.exampleValue = formData.value.exxampleNo;
            this.exampleData.exampleValid = formData.valid;
            this.sendOutput(this.exampleData)
        }else{
            this.exampleData.exampleValue = "";
            this.exampleData.exampleValid  = formData.valid;
            this.sendOutput(this.exampleData)  
        }
    }

    sendOutput(exampleData){
        this.change.emit(exampleData);
    }


}

While I check on the checkExampleData function in my parent component, I get both objects here (passing object and event object). This also emits the this.starSign value as an event object instead of exampleData.

Shreenil Patel · Accepted Answer · 2018-07-06 06:51:49Z

1

Its happening because you have used name change which is by default defined by angular for change events.

You must use some other name instead of change.

edited Jul 6, 2018 at 6:51

answered Jul 5, 2018 at 13:57

Shreenil Patel

1,0941 gold badge10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shreenil Patel Over a year ago

Welcome!! @Ricky

Karnan Muthukumar · Accepted Answer · 2018-07-06 04:27:43Z

0

Use like this, event.target.value

checkExampleData(example: any){   

        this.starSign = example.target.value;  
    console.log("value",this.starSign);
    }

That's all you got proper data. Whenever use event you have to use event.target.value.

Let try this once and let me know.

edited Jul 6, 2018 at 4:27

answered Jul 6, 2018 at 4:21

Karnan Muthukumar

1,8731 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

getting event object while using input and output decorators on properties

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related