Angular 7 Реактивный контроль формы - PullRequest
Новая
       26

Angular 7 Реактивный контроль формы

0 голосов
/ 07 декабря 2018

Я сделал простой веб-сайт на угловых 7 с реактивным контролем формы.Он содержит 2 поля ввода и 2 кнопки отправки, одно из которых является простым тестом для простого разложения на множители, а другое - тестом високосного года.Кнопки отправки отключены, пока пользователь не сделает правильный ввод, число.

Я знаю, что это будет легко с управлением на основе шаблонов, но я пытаюсь изучить реактивные формы.Я сделал 2 разные группы форм, и это работает.

Но знайте, что я хочу сделать это только с 1 группой форм.Я искал в интернете, но ничего не нашел по этому поводу.Итак, мой вопрос:

Можно ли сделать 2 разных теста только с одной группой форм?Будет проще, если я напишу больше тестов.Меньший код.

Спасибо

Мой код: 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: 

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;
  }

}

1 Ответ

0 голосов
/ 07 декабря 2018

Вы можете поместить все свои формы в одну группу 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

или 

this.priForm.controls['zah1'].value

Удачного кодирования!

...