Angular formフィールドを手動で無効に設定するにはどうすればよいですか?


190

ログインフォームに取り組んでいます。ユーザーが無効な資格情報を入力した場合、電子メールとパスワードの両方のフィールドに無効のマークを付け、ログインに失敗したことを示すメッセージを表示します。監視可能なコールバックからこれらのフィールドを無効に設定するにはどうすればよいですか?

テンプレート:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
  <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
    <md-input-container>
      <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
    </md-input-container>
    <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
    <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
     <md-checkbox class="remember-me">Remember Me</md-checkbox>
      <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
    </div>
    <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
     <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
   </div>
 </form>

ログイン方法:

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => {
      alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
    }, error => {
      this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.
      this.loginForm.controls.email.invalid = true;
      this.loginForm.controls.password.invalid = true; 
    });
  }

入力無効フラグをtrueに設定することに加えて、email.validフラグをfalseに設定し、loginForm.invalidもtrueに設定してみました。これらはどれも、入力に無効な状態を表示させません。


バックエンドはangularとは異なるポートにありますか?その場合、これはCORSの問題である可能性があります。バックエンドにどのフレームワークを使用していますか。
Mike3355 2017

setErrosメソッドを使用できます。ヒント:コンポーネントファイルに必要なバリデーターを追加する必要があります。また、反応型フォームでngModelを使用する特定の理由はありますか?
developer033

@ developer033はここのパーティーに少し遅れますが、それらはReactive Formではなく、テンプレート駆動型のフォームに見えます。
thenetimp

回答:


261

コンポーネント内:

formData.form.controls['email'].setErrors({'incorrect': true});

そしてHTMLで:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>

13
そして、どのようにしてエラーを後で削除しますか?setErrors({'incorrect': false})またはsetErrrors({})私のために働いていません
ロブステ

3
フィールドをリセットする代わりに、反応フォーム全体を有効または無効に設定できますか?
xtremist 2017年

29
@Robouste手動でエラーを削除できますsetErrrors(null)
Idrees Khan

6
この答えに加えて、このコードはformData.form.controls['email'].markAsTouched();、@ M.Farahmandが以下に述べるように、私なしでは機能しません。入力にcssクラスをsetErrors({'incorrect': true})設定するだけを使用ng-invalidします。誰かのお役に立てば幸いです。
バラバス

4
そして、「必須」のようにさらにバリデータがある場合はどうなりますか?setErrors(null)はそのエラーを削除しますか?
Please_Dont_Bully_Me_SO_Lords

87

Julia Passynkovaの答えに追加

コンポーネントに検証エラーを設定するには:

formData.form.controls['email'].setErrors({'incorrect': true});

コンポーネントの検証エラーを解除するには:

formData.form.controls['email'].setErrors(null);

を使用nullしてエラーを解除すると、すべてのエラーが上書きされるので注意してください。周りに何かを残したい場合は、まず他のエラーの存在を確認する必要があるかもしれません:

if (isIncorrectOnlyError){
   formData.form.controls['email'].setErrors(null);
}

3
formData.form.controls ['email']。setErrors({'incorrect':false});のようなものを使用して検証エラーの設定を解除することは可能ですか?
rudrasiva86

1
反応型についてはどうですか?
seidme

26

setErrors()テンプレートフォームのngModelChangeハンドラー内で呼び出そうとしていました。1ティック待つまで機能しませんでしたsetTimeout()

テンプレート:

<input type="password" [(ngModel)]="user.password" class="form-control" 
 id="password" name="password" required (ngModelChange)="checkPasswords()">

<input type="password" [(ngModel)]="pwConfirm" class="form-control"
 id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
 #pwConfirmModel="ngModel">

<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
   Passwords do not match
</div>

成分:

@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;

checkPasswords() {
  if (this.pwConfirm.length >= this.user.password.length &&
      this.pwConfirm !== this.user.password) {
    console.log('passwords do not match');
    // setErrors() must be called after change detection runs
    setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
  } else {
    // to clear the error, we don't have to wait
    this.pwConfirmModel.control.setErrors(null);
  }
}

このような問題は、私が反応型を好むようにしている。


Cannot find name 'NgModel'.@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;この問題に対する修正の行のエラー
Deep 3015

setTimeOutsを使用する必要があるのは何ですか?コントロールにもすぐには更新されないようで、これにも気づきました。これにより、この制限を回避するためのハックコードが多数導入されます。
ジェイクシェイクスワース2018

ありがとう。私は知っていましたsetErrorsが、使用するまで機能しませんでしたsetTimeout
Sampgun

25

コントロール名がマットプレフィックスで始まるマテリアル2の新しいバージョンでは、setErrors()は機能せず、代わりにJuilaの回答を次のように変更できます。

formData.form.controls['email'].markAsTouched();

1

これが機能する例です:

MatchPassword(AC: FormControl) {
  let dataForm = AC.parent;
  if(!dataForm) return null;

  var newPasswordRepeat = dataForm.get('newPasswordRepeat');
  let password = dataForm.get('newPassword').value;
  let confirmPassword = newPasswordRepeat.value;

  if(password != confirmPassword) {
    /* for newPasswordRepeat from current field "newPassword" */
    dataForm.controls["newPasswordRepeat"].setErrors( {MatchPassword: true} );
    if( newPasswordRepeat == AC ) {
      /* for current field "newPasswordRepeat" */
      return {newPasswordRepeat: {MatchPassword: true} };
    }
  } else {
    dataForm.controls["newPasswordRepeat"].setErrors( null );
  }
  return null;
}

createForm() {
  this.dataForm = this.fb.group({
    password: [ "", Validators.required ],
    newPassword: [ "", [ Validators.required, Validators.minLength(6), this.MatchPassword] ],
    newPasswordRepeat: [ "", [Validators.required, this.MatchPassword] ]
  });
}

これは「ハッキー」かもしれませんが、Angular Material Inputエラーを処理するためにカスタムErrorStateMatcherを設定する必要がないので、私はそれが好きです!
デビッドメリン

1

私の反応フォームでは、別のフィールドがチェックされた場合、フィールドを無効としてマークする必要がありました。ngバージョン7では、次のことを行いました。

    const checkboxField = this.form.get('<name of field>');
    const dropDownField = this.form.get('<name of field>');

    this.checkboxField$ = checkboxField.valueChanges
        .subscribe((checked: boolean) => {
            if(checked) {
                dropDownField.setValidators(Validators.required);
                dropDownField.setErrors({ required: true });
                dropDownField.markAsDirty();
            } else {
                dropDownField.clearValidators();
                dropDownField.markAsPristine();
            }
        });

上記のように、ボックスをチェックすると、ドロップダウンが必要に応じて設定され、ダーティとしてマークされます。このようにマークしないと、フォームを送信するか、フォームを操作するまで、(エラーで)無効になりません。

チェックボックスがfalse(チェックされていない)に設定されている場合、ドロップダウンで必要なバリデーターをクリアし、それを初期状態にリセットします。

また、フィールドの変更の監視を解除することを忘れないでください!


1

次のように、viewChildの「タイプ」をNgFormに変更することもできます。

@ViewChild('loginForm') loginForm: NgForm;

次に、@ Juliaが述べたのと同じ方法でコントロールを参照します。

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => {
      alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
    }, error => {
      this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.

      this.loginForm.controls['email'].setErrors({ 'incorrect': true});
      this.loginForm.controls['password'].setErrors({ 'incorrect': true});
    });
  }

エラーをnullに設定すると、UIのエラーがクリアされます。

this.loginForm.controls['email'].setErrors(null);

0

その遅いが次の解決策は私から働いたが。

    let control = this.registerForm.controls['controlName'];
    control.setErrors({backend: {someProp: "Invalid Data"}});
    let message = control.errors['backend'].someProp;

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.