markdown 角度 - 具有多输入场的材料形式

Posted 2021-05-06

# Angular - Form With Multiple Input Field

[SOURCE](https://loiane.com/2017/08/angular-reactive-forms-trigger-validation-on-submit/), [SOURCE](https://stackoverflow.com/a/14750390/1602807)

`contact-information.component.html`:

```html
<div id="ContactInput" fxLayout="column" [formGroup]="contactForm">
    <mat-form-field appearance="standard" fxFlex color="accent">
        <mat-label>{{'ContactInformation.customer_name_heading' | translate}}</mat-label>
        <input matInput [placeholder]="'ContactInformation.customer_name_heading' | translate"
               [formControlName]="customerInputName">
    </mat-form-field>
    <mat-form-field appearance="standard" fxFlex color="accent">
        <mat-label>{{'ContactInformation.patient_name_heading' | translate}}</mat-label>
        <input matInput [placeholder]="'ContactInformation.patient_name_placeholder' | translate"
               [formControlName]="patientInputName">
    </mat-form-field>
    <mat-form-field appearance="standard" fxFlex color="accent">
        <mat-label>{{'ContactInformation.phone_heading' | translate}}</mat-label>
        <input matInput [placeholder]="'ContactInformation.phone_heading' | translate"
               [formControlName]="phoneInputName">
    </mat-form-field>
    <mat-form-field appearance="standard" fxFlex color="accent">
        <mat-label>{{'ContactInformation.email_heading' | translate}}</mat-label>
        <input matInput [placeholder]="'ContactInformation.email_placeholder' | translate"
               [formControlName]="emailInputName">
    </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" id="ContinueButton">
    <button (click)="goToNextScreen()"
            class="btn-blue-width100-rounder"
            [title]="'ContactInformation.continue' | translate"
            [disabled]="!contactForm.valid">
        {{ 'ContactInformation.continue' | translate }}
    </button>
</div>
```

`contact-information.component.ts`:

```javascript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-contact-information',
    templateUrl: './contact-information.component.html',
    styleUrls: ['./contact-information.component.scss']
})
export class ContactInformationComponent implements OnInit {
    private contactForm: FormGroup;
    private readonly customerInputName = 'customerFullNameInput';
    private readonly patientInputName = 'patientFullNameInput';
    private readonly phoneInputName = 'phoneNumberInput';
    private readonly emailInputName = 'emailInput';

    constructor(formBuilder: FormBuilder) {
        this.createForm(formBuilder);
    }

    ngOnInit() {
    }

    private createForm(formBuilder: FormBuilder) {
        this.contactForm = formBuilder.group({
            [this.customerInputName]: ['', Validators.required],
            [this.patientInputName]: '',
            [this.phoneInputName]: ['', Validators.required],
            [this.emailInputName]: ['', Validators.email],
        });
    }
}
```

For more validation see [Validation](https://angular.io/guide/form-validation).