在属性上使用输入和输出装饰器时获取事件对象
getting event object while using input and output decorators on properties
在属性上使用@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 发出。
发生这种情况是因为您使用了名称 change
,默认情况下由 angular 为更改事件定义。
您必须使用其他名称而不是 change
。
这样使用,event.target.value
checkExampleData(example: any){
this.starSign = example.target.value;
console.log("value",this.starSign);
}
这就是您获得的所有正确数据。
每当使用事件时,您都必须使用 event.target.value.
让我们试试这个,让我知道。
在属性上使用@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 发出。
发生这种情况是因为您使用了名称 change
,默认情况下由 angular 为更改事件定义。
您必须使用其他名称而不是 change
。
这样使用,event.target.value
checkExampleData(example: any){
this.starSign = example.target.value;
console.log("value",this.starSign);
}
这就是您获得的所有正确数据。 每当使用事件时,您都必须使用 event.target.value.
让我们试试这个,让我知道。