buttonのdisableが効かない

トラブルシューティング
#1

なぜか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);
  }

}
#2

この部分を詳細に説明してもらえますか？ Validationが通っている という状態の定義と、 disableが効かない の定義に誤解がないようにしたいです

#3

メールアドレスのformControlがzipcodeControlになってしまっているためです。
emailControlに変更したら大丈夫なはずです:grinning:

  <mat-form-field fxFlexFill>
    <mat-label>メールアドレス</mat-label>
    <input matInput [formControl]="zipcodeControl" required>
  </mat-form-field>
「いいね！」 2
#4

Validationが通る。
isEmailInvalid()とisZipcodeInvalid()の返り値がfalseになる。

buttonがdisable falseになって押せるようになれない

#5

@itigoore01 さんの通り、原因はこれっぽいですね。

stackblitz に書いてて気づいたんですけどログインボタンが2つあるんですね。
片方のボタンは disabled をバインディングしてるけど、もう片方がバインディングしてなくて動作してなさそうです。
動作してる方のボタンをスタイルで消してる or 隠れてるとかないでしょうか？

「いいね！」 2
#6

ご丁寧にありがとうございます！できました！

確かに、

こちらを解消したら治りました！

「いいね！」 1