Ich versuche, ein Formular zu erstellen, bei dem Eingabefelder in einem Array definiert sind, das wie folgt aussieht:
export const FormTemplate = [
//contact
{
name: '',
lastname: '', //required
email: '', //required, valid
phone: '',
},Und ich möchte Validatoren zu den Feldern 'Nachname' und 'E-Mail' hinzufügen.
Meine .ts-Datei sieht so aus:
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');
}<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>
Ich möchte mit einem Array arbeiten, das als Vorlage funktioniert, weil ich nicht jedes Eingabefeld in meiner .ts-Datei definieren möchte. Aber gibt es keine andere Möglichkeit, wenn ich Validatoren verwenden möchte?
Danke im Voraus
Ich habe einen Weg gefunden, das erwartete Ergebnis zu erzielen
So sieht mein Template .ts jetzt aus:
import {Validators} from '@angular/forms';
export const FormTemplate = [
//contact
{
name: '',
lastname: ['',[
Validators.required
]],
email: ['',[
Validators.required,
Validators.email
]],
phone: '',
},
Und hier ist meine Datei component.ts:
ngOnInit(): void {
this.contactForm = this.fb.group(this.formTemplate[0]);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句