Я создал реактивную форму с angular материалом. У меня есть выпадающий список, поэтому на основе выпадающего списка. Поля ввода будут изменены. Так что теперь с кодом ниже. Если я просто отправляю его, он отправляет массив в мой бэкэнд. Если я включаю опцию отключения кнопки, Если не могу отправить, так как мои формы имеют 8 входов. Но когда я выбираю один вариант, он будет иметь только 6 полей. Так, как я могу сделать порядок проверок, чтобы запретить пользователю отправлять пустую форму.
Ниже мой HTML Код
<div class = "tp-container">
<form [formGroup]="myForm" (ngSubmit)="submitForm()">
<!-- Name -->
<mat-form-field class="example-full-width" >
<input matInput placeholder="Name" formControlName="name">
<!-- error -->
<mat-error *ngIf="errorHandling('name', 'required')">
You must provide a <strong> Name</strong>
</mat-error>
</mat-form-field>
<!-- Email -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Email" formControlName="email">
<!-- error -->
<mat-error *ngIf="errorHandling('email', 'required')">
You must provide a <strong>email</strong>
</mat-error>
</mat-form-field>
<!-- Class -->
<mat-form-field>
<mat-label>Item</mat-label>
<mat-select [(value)]="selected" formControlName="Items">
<mat-option [value]="item" *ngFor="let item of Items">{{item}}
</mat-option>
</mat-select>
</mat-form-field>
<!-- Eng Name -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Name" formControlName="engname">
<!-- error -->
<mat-error *ngIf="errorHandling('engname', 'required')">
You must provide a <strong>Name</strong>
</mat-error>
</mat-form-field>
<!-- JP Name -->
<div *ngIf="myForm.get('Items').value == 'Mobile">
<mat-form-field class="example-full-width" >
<input matInput placeholder="JP Name" formControlName="jpname">
<!-- error -->
<mat-error *ngIf="errorHandling('jpname', 'required')">
You must provide a <strong> Japanese Name</strong>
</mat-error>
</mat-form-field></div>
<!-- LAN ID Name -->
<div *ngIf="myForm.get('Items').value == 'Software'">
<mat-form-field class="example-full-width" >
<input matInput placeholder="LAN ID" formControlName="lan">
<!-- error -->
<mat-error *ngIf="errorHandling('lan', 'required')">
Please provide your <strong> LAN ID</strong>
</mat-error>
</mat-form-field></div>
<!-- Application Name -->
<div *ngIf="myForm.get('Items').value == 'Network'">
<mat-form-field class="example-full-width" >
<input matInput placeholder="Application Name" formControlName="app">
<!-- error -->
<mat-error *ngIf="errorHandling('app', 'required')">
Please provide the <strong>Application Name</strong>
</mat-error>
</mat-form-field></div>
<!-- Submit -->
<div class="button-wrapper">
<button type="submit" color=#C93C6A class="btn-block" >Submit</button>
</div>
</form>
</div>
Ниже мой файл ts:
import { Component,OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { HttpClient } from '@angular/common/http';
export interface Subject {
name: string;
}
@Component({
selector: 'app-lan',
templateUrl: './lan.component.html',
styleUrls: ['./lan.component.css']
})
export class LanComponent implements OnInit {
myForm: FormGroup;
Items: any = ['Mobile', 'Software','Network','Others'];
constructor(public fb: FormBuilder,private http: HttpClient,) {}
public selected = '';
ngOnInit(): void {
this.reactiveForm()
}
/* Reactive form */
reactiveForm() {
this.myForm = this.fb.group({
name: ['', [Validators.required]],
email: ['', [Validators.required]],
Items:[''],
request: ['Urgent'],
startdate: ['', [Validators.required]],
subjects: [this.SubjectsArray],
engname: ['', [Validators.required]],
jpname: ['', [Validators.required]],
lan:['', [Validators.required]],
soft:['', [Validators.required]],
server:['', [Validators.required]],
remarks:['']
})
}
submitForm() {
var formData: any = new FormData();
formData.append("name", this.myForm.get('name').value);
formData.append("email", this.myForm.get('email').value);
formData.append("Items", this.myForm.get('Items').value);
formData.append("request", this.myForm.get('request').value);
formData.append("startdate", this.myForm.get('startdate').value);
formData.append("subjects", this.myForm.get('subjects').value);
formData.append("engname", this.myForm.get('engname').value);
formData.append("jpname", this.myForm.get('jpname').value);
formData.append("lan", this.myForm.get('lan').value);
formData.append("soft", this.myForm.get('soft').value);
formData.append("version", this.myForm.get('version').value);
formData.append("reason", this.myForm.get('reason').value);
formData.append("app", this.myForm.get('app').value);
formData.append("server", this.myForm.get('server').value);
formData.append("remarks", this.myForm.get('remarks').value);
formData.append("port", this.myForm.get('port').value);
console.log(this.myForm)
this.http.post('API url', this.myForm.value).subscribe(
(response) => console.log(response),
(error) => console.log(error))
console.log("Form Submitted!");
this.myForm.reset();
}
}