我想使用getter和setter将输入值绑定到模型。通过这种方式,我可以在写入内部时防止和/或操纵输入的值。
例如,我想要输入框内的阻止数字。所以,如果写'abc'一切都好,那么如果我开始写一个数字,就不应该发生任何事情(模型和输入的值)。问题是,使用以下代码,我能够在输入框内写入任何内容(但模型是正确的)。这意味着输入框值并不真正代表我的模型。
注意:超出这个问题的原因是我想使用我的模型来验证表单,防止例如特定字符。我不想使用反应形式,因为我希望在模型中保留我的验证而不是组件。另请注意,在实际场景中,我会有一个带有内部名称的UserModel类和其他带有验证的字段
public class Server2 extends JFrame implements Runnable {
konsol = new JTextPane();
konsol.setEditable(false);
public void setTekst(String tekst) {
konsol.setText(tekst);
}
public void run() {
instance = new Server2();
instance.setVisible(true);
}
}
答案 0 :(得分:4)
如果您操纵设置器中的值,这可能会导致更改检测出现问题,因此ngModel
无法获取更改并且不会更新<input>
< / p>
要解决此问题,您可以使用
export class App {
_name:string = 'ss';
constructor(private cdRef:ChangeDetectorRef) {}
get name() {
return this._name;
}
set name(value:String) {
this._name = value + 'x';
this.cdRef.detectChanges()
}
}
如果将值重置为之前的值,则可能需要先传递一个人为的不同值,否则更改检测不会检测到更改,甚至detectChanges()
也不会更新输入
set name(value:String) {
var oldVal = this._name;
this._name = null;
this.cdRef.detectChanges()
this._name = oldVal;
this.cdRef.detectChanges()
}
答案 1 :(得分:1)
基于@GünterZöchbauer回答我做了一个解决方法。它不是确定的,可能更抽象,但现在还可以。
export class App implements OnInit {
@Input() userModel: UserModel = null;
public _vm;
constructor(private _changeDetectionRef: ChangeDetectorRef) {
}
/**
* Initalize view model, it's important to keep names specular
*/
ngOnInit() {
this._vm = {
name: this.userModel.name,
surname: this.userModel.surname,
};
}
/**
* Helper for avoid detectchanges inside the modal, and reduce boilerplate. We could also ad an interface/type of the possibile field value, ie type fieldT= 'name' | 'surname';
* @param field
* @param val
*/
protected updateModel(field, val: string): void {
this._vm[field] = null;
this._changeDetectionRef.detectChanges();
this.userModel[field] = val;
this._vm[field] = this.userModel[field];
this._changeDetectionRef.detectChanges();
}
}
在userModel中:
....
public get name(): string {
return this.name';
}
public set name(val: string) {
if ((new RegExp(/^[a-zA-Z]*$/).test(val))) {
this.name = val;
}
}
在模板中:
<input type="text" name="userName" [ngModel]="_vm.name" (ngModelChange)="updateModel('name', $event)">
答案 2 :(得分:0)
您可以使用(ngModelChange)
和[ngModel]
在更改时测试模型的内容。
正如您在 Plunker 中所看到的,如果模型无效,模型将不会更改。
@Component({
selector: 'my-app',
template: `
<div>
<h2><input #input type="text" [ngModel]="name" (ngModelChange)='valid(input.value)'> {{name}}</h2>
</div>
`,
})
export class App {
name:string = 'ss';
constructor() {
}
valid(value){
if(value){ //<--- Your test here
this.name = value;
}
}
}