Как добавить валидаторы при использовании FormBuilder.group () с массивом шаблонов в Angular? - PullRequest
Новая
       39

Как добавить валидаторы при использовании FormBuilder.group () с массивом шаблонов в Angular?

0 голосов
/ 01 мая 2020


Я пытаюсь создать форму, чтобы поля ввода определялись в массиве, похожем на это: 

export const FormTemplate = [

    //contact 
    {
        name: '',
        lastname: '', //required
        email: '', //required, valid
        phone: '',     
    },

И я хочу добавить валидаторы в поля 'фамилия' и 'электронная почта'.
Мой файл .ts выглядит так: 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { FormBuilder, FormGroup, FormArray, Validators} from '@angular/forms';
import { throwError } from 'rxjs';
import { saveAs } from 'file-saver'
import { FormTemplate } from './form-template'

@Component({
  selector: 'app-request-form',
  templateUrl: './request-form.component.html',
  styleUrls: ['./request-form.component.sass']
})
export class RequestFormComponent implements OnInit {
  formTemplate = FormTemplate;
  contactForm: FormGroup;
  
  submitData;
  url = 'http://localhost:3000/';
  
  constructor(
    private fb: FormBuilder,
    private http: HttpClient
  ) { }

  ngOnInit(): void {
   this.contactForm = this.fb.group(this.formTemplate[0],{
      validator: Validators.compose([
        Validators.email,
        Validators.required
      ])
    });
  }
  submitToServer(){
    this.submitData = [
      this.contactForm.value,
      this.addressForm.value, 
      this.companyForm.value,
    ];
    var mediaType = 'application/pdf';
      this.http.post(this.url, this.submitData, {responseType: 'blob'}).subscribe(
        (response) =>{
          var blob = new Blob([response], {type: mediaType});
          //saveAs(blob, 'name.pdf');
        },
        e => {
          alert(e.message)
          throwError(e);}
      )
  }

  get email(){
    return this.contactForm.get('email');
  }

А вот мой html: 
<mat-horizontal-stepper>
<mat-step>
    Value:{{contactForm.value | json}}
    <form [formGroup]="contactForm" class="contact">
        <mat-form-field>
            <input matInput placeholder="name" formControlName="name" class="input">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="lastname" formControlName="lastname">
        </mat-form-field>
        <mat-form-field>
            <input type="email" matInput placeholder="email" formControlName="email">
            <mat-error *ngIf="email.invalid && email.touched"> 
                Email looks wrong
            </mat-error>
        </mat-form-field>
        <mat-form-field>
            <input type="tel" matInput placeholder="phone" formControlName="phone">
        </mat-form-field>
    </form>
    <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
    </div>
</mat-step>

Я хочу работать с массивом, который работает как шаблон, потому что я не хочу определять каждое поле ввода в моем файле .ts. Но нет ли другого способа, когда я хочу использовать валидаторы?
Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Я нашел способ получить ожидаемый результат

Вот как теперь выглядит мой шаблон .ts: 

import {Validators} from '@angular/forms';
export const FormTemplate = [

//contact 
{
    name: '',
    lastname: ['',[
        Validators.required
    ]], 
    email: ['',[
        Validators.required,
        Validators.email
      ]],
    phone: '',       
},

И вот мой файл component.ts: 

ngOnInit(): void {
this.contactForm = this.fb.group(this.formTemplate[0]);
}
0 голосов
/ 02 мая 2020

Это может сработать- 

this.contactForm = this.fb.group(this.formTemplate[0],
  { validators: [Validators.required,Validators.email] }
});
...