[英]Angular 6 reactive form control
i want to make a little homepage with angular 6. One part of it, are some tests like prime factorization and a test for leap-years. 我想制作一个角度为6的主页。其中的一部分是一些测试,例如素因数分解和leap年测试。 I made this with reactive forms for validation. 我使用反应形式进行验证。 My problem is, i can't execute both functions. 我的问题是,我不能同时执行两个功能。
HTML: HTML:
<div class="container">
<form [formGroup]="primForm" (ngSubmit)="onSubmit(primForm.value)" novalidate>
<div class="form-group">
<h3>Primfaktoren</h3>
<label>Name:
<input class="form-control" formControlName="zahl" placeholder="42" #spy>
</label>
<button type="submit" [disabled]="primForm.pristine || primForm.invalid" class="btn btn-success">Zerlegen</button>
<br>
<div>Die Faktoren sind:</div>
<br>
<div style="display:inline" *ngFor="let faktor of faktoren">{{faktor}}</div>
<br>
</div>
<p>{{spy.className}}</p>
</form>
<form [formGroup]="jahrForm" (ngSubmit)="onSubmit(jahrForm.value)" novalidate>
<div class="form-group">
<h3>Schaltjahrtest</h3>
<label>Jahr:
<input class="form-control" formControlName="jahr" placeholder="2018" #spy1>
</label>
<button type="submit" [disabled]="jahrForm.pristine || jahrForm.invalid" class="btn btn-success">Prüfen</button>
<p>{{jahr}} ist {{prf}} Schaltjahr</p>
</div>
<p>{{spy1.className}}</p>
</form>
</div>
Typescript: 打字稿:
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.primForm = this.fb.group({
zahl: ['', Validators.min(3)]
});
this.jahrForm = this.fb.group({
jahr: ['', Validators.min(1)]
});
}
onSubmit(object: Object) {
console.log(object, typeof object);
this.submitted = true;
if (this.primForm.dirty) {
this.help = parseInt(object['zahl'], 10);
this.ergebnis = this.primFaktor(this.help);
} else {
if (this.jahrForm.dirty) {
this.help = parseInt(object['jahr'], 10);
this.prf = this.jahrTest(this.help);
}
}
}
primFaktor(zahl: number): number[] {
this.faktoren = [];
let index = 2;
while (zahl !== 1) {
if (zahl % index === 0) {
this.faktoren.push(index);
zahl /= index;
index = 2;
} else {
index++;
}
}
return this.faktoren;
}
jahrTest(jahr: number): string {
this.antwort = '';
if (jahr % 4 === 0 && (jahr % 100 !== 0 || jahr % 400 === 0)) {
this.antwort = 'ein';
} else {
this.antwort = 'kein';
}
return this.antwort;
}
}
I can use the prim function but if i will use the year test, nothing happens and the page will crash. 我可以使用prim函数,但是如果我要使用Year Test,则什么也不会发生,并且页面会崩溃。
I found nothing in the net. 我什么也没发现。
Maybe someone has an idea or a workaround. 也许有人有想法或解决方法。
Thanks. 谢谢。
I solved the problem. 我解决了问题。 Changed the typescript from: 将打字稿从以下位置更改:
onSubmit(object: Object) {
console.log(object, typeof object);
this.submitted = true;
if (this.primForm.dirty) {
this.help = parseInt(object['zahl'], 10);
this.ergebnis = this.primFaktor(this.help);
} else {
if (this.jahrForm.dirty) {
this.help = parseInt(object['jahr'], 10);
this.prf = this.jahrTest(this.help);
}
}
}
To: 至:
const key = Object.keys(object);
this.submitted = true;
if (key[0] === 'zahl') {
this.help = parseInt(object['zahl'], 10);
this.ergebnis = this.primFaktor(this.help);
} else {
if (key[0] === 'jahr') {
this.help = parseInt(object['jahr'], 10);
this.prf = this.jahrTest(this.help);
}
}
}
Now i get the key from the Object and the functions checks the key value. 现在,我从对象获取密钥,并且函数检查密钥值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.