なぜかValidation通ってもdisableが効かないのですが、、原因何かわかりますでしょうか、、
component.html
<mat-card-header>
<mat-card-title class="login-title">登録</mat-card-title>
</mat-card-header>
<mat-spinner *ngIf="(loading$ | async); else elseContent"></mat-spinner>
<ng-template #elseContent>
<mat-card-content>
<form [formGroup]="formGroup">
<mat-form-field fxFlexFill>
<mat-label>郵便番号</mat-label>
<input matInput placeholder="1000014" [formControl]="zipcodeControl" required>
</mat-form-field>
<mat-form-field fxFlexFill>
<mat-label>メールアドレス</mat-label>
<input matInput [formControl]="zipcodeControl" required>
</mat-form-field>
<mat-error *ngIf="isEmailInvalid()">{{getEmailErrorMessage()}}</mat-error>
<button type="button" mat-raised-button color="primary" fxFlexFill [disabled]="formGroup.invalid"
(click)="onSubmit()">Login</button>
<button mat-button routerLink="/sign-in">ログインはこちら</button>
{{!formGroup.valid}}
</form>
</mat-card-content>
</ng-template>
component.ts
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Validators, FormGroup, FormBuilder, AbstractControl, FormControl } from '@angular/forms';
import { Observable, from } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { AuthState } from 'src/app/store/auth/state';
import * as AuthSelectors from '../../store/auth/selector';
@Component({
selector: 'app-mat-sign-up',
templateUrl: './mat-sign-up.component.html',
styleUrls: ['./mat-sign-up.component.styl']
})
export class MatSignUpComponent implements OnInit {
formGroup: FormGroup;
loading$: Observable<boolean>;
constructor(
private signUpWithEmailLink: SignUpWithEmailLink,
public dialog: MatDialog,
private store: Store<AuthState>,
private formBuilder: FormBuilder) {
}
ngOnInit() {
this.loading$ = this.store.pipe(select(AuthSelectors.getLoading));
this.createForm();
}
private createForm() {
this.formGroup = this.formBuilder.group({
email: [null, Validators.required],
zipcode: [null, Validators.required]
});
}
get emailControl(): AbstractControl {
return this.formGroup.get('email');
}
get zipcodeControl(): AbstractControl {
return this.formGroup.get('zipcode');
}
getEmailErrorMessage() {
return this.emailControl.errors.required ? '入力してください' :
this.emailControl.errors.email ? 'メールアドレスを入力してください' :
'';
}
getZipCodeErrorMessage(): string {
return this.zipcodeControl.errors.required ? '入力してください' :
this.zipcodeControl.errors.pattern ? '7桁にしてください' :
'';
}
isEmailInvalid(): boolean {
return this.emailControl.invalid &&
(this.emailControl.dirty || this.emailControl.touched);
}
isZipcodeInvalid(): boolean {
return this.zipcodeControl.invalid &&
(this.zipcodeControl.dirty || this.zipcodeControl.touched);
}
}