以 Material ErrorStateMatcher 來實現表單欄位一致性檢查

import { FormGroup, FormControl, FormGroupDirective, NgForm, ValidatorFn } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material';
 
export class CustomValidMatcher implements ErrorStateMatcher {
    //驗證群組內欄位資料是否一致
    childrenEqual: ValidatorFn = (formGroup: FormGroup) => {
        const [firstControlName, ...otherControlNames] = Object.keys(formGroup.controls || {});
        const isValid = otherControlNames.every(controlName => formGroup.get(controlName).value === formGroup.get(firstControlName).value);
        return isValid ? null : { childrenNotEqual: true };
    }
 
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        return control.parent.invalid && control.touched;
    }
 
    errEmail():string {
        return '無效的email格式(username@domain)';
    }
    errPassword():string {
        return '須輸入6字母以上,且包含至少一個數字與符號';
    }
    errConfirm():string {
        return '輸入不一致';
    }
    //正則檢查式
    regExps: { [key: string]: RegExp } = {
        password: /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,}$/,
        email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    };
}

import { CustomValidMatcher } from './custom.valid.matcher';
 
validMatcher = new CustomValidMatcher();
editForm: FormGroup;
 
constructor() {
    this.editForm.addControl('emailGroup', this._formBuilder.group({
            email: ['', [Validators.required, Validators.pattern(this.validMatcher.regExps.email)] ],
            confirmEmail: ['', Validators.required]
        }, { validator: this.validMatcher.childrenEqual })
    );
 
    this.editForm.addControl('passwordGroup', this._formBuilder.group({
            password: ['', [Validators.required, Validators.pattern(this.validMatcher.regExps.password)] ],
            confirmPassword: ['', Validators.required]
        }, { validator: this.validMatcher.childrenEqual })
    );
}

<form [formGroup]="editForm" (ngSubmit)="onSubmit(editForm.value, editForm.valid)">
    <div class="row" formGroupName="emailGroup">
        <div class="col-md">
            <mat-form-field>
                <input matInput placeholder="email" formControlName="email"/>
                <mat-error>{{validMatcher.errEmail()}}</mat-error>
            </mat-form-field>
        </div>
        <div class="col-md">
            <mat-form-field>
                <input matInput placeholder="confirmEmail" formControlName="confirmEmail" [errorStateMatcher]="validMatcher"/>
                <mat-error>{{validMatcher.errConfirm()}}</mat-error>
            </mat-form-field>
        </div>
    </div>
    <div class="row" formGroupName="passwordGroup">
        <div class="col-md">
            <mat-form-field>
                <input matInput placeholder="Password" type="password" formControlName="password">
                <mat-error>{{validMatcher.errPassword()}}</mat-error>
            </mat-form-field>
        </div>
        <div class="col-md">
            <mat-form-field>
                <input matInput placeholder="Confirm password" type="password" formControlName="confirmPassword" [errorStateMatcher]="validMatcher">
                <mat-error>{{validMatcher.errConfirm()}}</mat-error>
            </mat-form-field>
        </div>
    </div>
</from>