получение объекта события при использовании декораторов ввода и вывода в свойствах - PullRequest
Новая
       17

получение объекта события при использовании декораторов ввода и вывода в свойствах

0 голосов
/ 05 июля 2018

При использовании декораторов @input и @output для свойств я получаю объект события, а также передаю объект в выходное свойство, а объект события реплицирует передаваемый объект.

Вот мой код.

В родительском компоненте есть. 

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

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

И мой дочерний компонент 

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


}

Пока я проверяю функцию checkExampleData в моем родительском компоненте, я получаю здесь оба объекта (передавая объект и объект события). При этом также выдается значение this.starSign в качестве объекта события вместо exampleData.

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Используйте вот так, event.target.value 

checkExampleData(example: any){   

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

Это все, что вы получили правильные данные. Всякий раз, когда вы используете событие, вы должны использовать event.target.value.

Давай попробуем это один раз и дай мне знать.

0 голосов
/ 05 июля 2018

Это происходит потому, что вы использовали имя change, которое по умолчанию определено как angular для событий изменения.

Вы должны использовать другое имя вместо change.

...