[英]Angular 7 Reactive Form Control
i made a simple website in angular 7 with reactive form control. 我在Angular 7中创建了一个具有反应形式控件的简单网站。 It contains 2 input fields and 2 submit button, one is a simple test for prime factorization and one a leap-year test.
它包含2个输入字段和2个“提交”按钮,一个是用于素数分解的简单测试,另一个是a年测试。 The submit buttons are disabled till the user made the right input, a number.
除非用户输入正确的数字,否则提交按钮将被禁用。
I know this will be easy with template driven control but i am trying to learn reactive forms. 我知道使用模板驱动的控制会很容易,但是我正在尝试学习反应形式。 I made 2 different form-groups and it works.
我做了2个不同的表单组,并且有效。
But know i want to make it with only 1 form-group. 但知道我想只用1个表格组。 I searched the internet but found nothing about this.
我在互联网上搜索,但对此一无所获。 So my question:
所以我的问题是:
Is it possible to make the 2 different tests with only 1 form-group? 是否可以仅使用1个表单组进行2个不同的测试? Would be easier if i will write more tests.
如果我要编写更多测试,会更容易。 Smaller code.
较小的代码。
Thanks 谢谢
My Code: HTML: 我的代码:HTML:
<div class="container">
<form [formGroup]="primForm" (ngSubmit)="onSubmit(primForm.value)" novalidate>
<div class="form-group">
<h3>Primfaktoren</h3>
<mat-form-field>
<input matInput class="form-control" formControlName="zahl" placeholder="Zu prüfende Zahl">
</mat-form-field>
<button type="submit" [disabled]="primForm.pristine || primForm.invalid" class="btn btn-success">Zerlegen</button>
<br>
<div>Die Faktoren sind:
<div style="display:inline" *ngFor="let faktor of faktoren">{{faktor}} </div>
<br>
</div>
</div>
</form>
<form [formGroup]="jahrForm" (ngSubmit)="onSubmit(jahrForm.value)" novalidate>
<div class="form-group">
<h3>Schaltjahrtest</h3>
<mat-form-field>
<input matInput class="form-control" formControlName="jahr" placeholder="Welches Jahr?">
</mat-form-field>
<button type="submit" [disabled]="jahrForm.pristine || jahrForm.invalid" class="btn btn-success">Prüfen</button>
<div *ngIf="antwort">
<p>{{jahrForm.value.jahr}} ist {{antwort}} Schaltjahr</p>
</div>
</div>
</form>
</div>
TS: TS:
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-algos',
templateUrl: './algos.component.html',
styleUrls: ['./algos.component.scss']
})
export class AlgosComponent {
title = 'Mathematische Tests';
primForm: FormGroup;
jahrForm: FormGroup;
submitted = false;
help: number;
ergebnis: number[];
prf: string;
faktoren = [];
antwort: string;
zahl: number;
jahr: number;
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) {
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);
}
}
}
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;
}
}
You can put all your form in one formGroup 您可以将所有表格放入一个表格中
this.primForm = new FormGroup(
{
'zahl': new FormControl('', Validators.min(3)),
'jahr': new FormControl('', [Validators.min(3), Validators.required])
});
this.primForm.setValue({
zahl: this.someObject.someValue,
jahr: this.someObject.someValueX
});
this.primForm.controls['zahl'].valid
this.priForm.value.zah1
or 要么
this.priForm.controls['zah1'].value
Happy coding ! 编码愉快!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.