I know how to fix my component using a different name for the output value of this component.
let me share my code
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {TranslationPipe} from "../pipes/translation.pipe";
@Component({
selector: 'msisdn-confirm',
template: `
<div class="msisdn-confirm">
<div>
<input type="text" [(ngModel)]="m1">
</div>
<div>
<input type="text" [(ngModel)]="m2">
</div>
<p class="error">{{message}}</p>
</div>
`
})
export class MsisdnConfirm {
message:string;
@Output('mobile') emitter: EventEmitter<string> = new EventEmitter<string>();
@Input('mobile') set setMobileValue(value) {
this.msisdn_confirm = this.msisdn = value;
}
set m1(value) {
this.msisdn = value;
if (this.valid()) {
console.log('emit' + this.msisdn);
this.emitter.emit(this.msisdn);
}
}
set m2(value) {
this.msisdn_confirm = value;
if (this.valid()) {
console.log('emit' + this.msisdn);
this.emitter.emit(this.msisdn);
}
}
get m1():string {
return this.msisdn;
}
get m2():string {
return this.msisdn_confirm
}
msisdn: string;
msisdn_confirm: string;
constructor() {
}
private valid(): boolean {
if (!/06[0-9]{8}/.test(this.msisdn)) {
this.message = new TranslationPipe().transform("Het mobiele nummer is incorrect, (bijvoorbeeld: 0612345678)")
return false;
} else if (this.msisdn != this.msisdn_confirm) {
this.message = new TranslationPipe().transform("De mobiele nummers komen niet overeen")
return false;
}
this.message = null;
return true;
}
}
So this is a very basic component which validates two strings to be a "valid" dutch Mobile number, so a confirm box so to say. Now I can get my value in the parent component by doing something like
(mobile)="myParam = $event"
What I want is to use it like
[(mobile)]="myParam"
This only works for setting though, is this not supported on custom components?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…