web-dev-qa-db-ja.com

フォームコントロールからバリデータを削除Angular 6

次のような、いくつかのコントロールのフォームコントロールとバリデーターが多数あるフォームがあります。

title = new FormControl("", Validators.compose([
    Validators.required
]));
description = new FormControl("", [
    Validators.required,
    Validators.minLength(1),
    Validators.maxLength(2000)
]);

コントロールを検証しないドラフトとして保存ボタンを追加するにはどうすればよいですか？またはそれらを削除しますか？

私は次のような多くの例を試しました：

saveDraft() {
   this.addProjectForm.controls.title.clearValidators();
   this.addProjectForm.controls.title.setErrors(null);
   this.addProjectForm.controls.title.setValidators(null);
}

または

saveDraft() {
   this.addProjectForm.controls['title'].clearValidators();
   this.addProjectForm.controls['title'].setErrors(null);
   this.addProjectForm.controls['title'].setValidators(null);
}

しかし、何も動作しません。

angularangular-formsreactive-formsangular-formbuilder
8
Mohammed

このドラフトとして保存機能を使用して、非常に多くのフォームを実装しました。

私が通常行うことは、フォームがvalidでない限り、送信ボタンを無効のままにしておくことです。ただし、[下書きとして保存]ボタンは常に有効のままにしてください。

これにより、ユーザーが[下書きとして保存]ボタンをクリックした場合に検証を適用せずにフォームの内容を保存できます。

ユーザーはフォームが無効であるため、とにかく[保存]ボタンをクリックできません。

これはすべて、次のようなコードに変換されます。

<div class="image-flip">
  <div class="mainflip">
    <div class="frontside">
      <div class="card">
        <div class="card-body add-generic-card">

          <form [formGroup]="addGameForm">
            ...

            <div class="draft-publish-button">
              <button 
                class="..." 
                type="button" 
                (click)="onFormSubmit('DRAFT')">
                  Save as Draft
              </button>

              <button 
                class="..." 
                type="button" 
                (click)="onFormSubmit('PUBLISHED')" 
                [disabled]="addGameForm.invalid">
                  Publish
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
1
SiddAjmera

これを試して：

this.addProjectForm.get('title').setValidators([]); // or clearValidators()
this.addProjectForm.get('title').updateValueAndValidity();

バリデータを追加する場合は、バリデータの配列を追加します。

this.addProjectForm.get('title').setValidators([Validators.required]);
this.addProjectForm.get('title').updateValueAndValidity();

注：変更するたびにupdateValueAndValidity（）を使用する必要があります

10
Admir

フィールドからバリデーターを削除したい場合は、別の解決策として以下を試すことができます：

public saveDraft(): void {
   this.addProjectForm.get('title').clearValidators();
   this.addProjectForm.get('title').updateValueAndValidity();
}
7
billyjov

最良の解決策は、入力フィールド（フォームコントロール）で検証を行わず、このコードを追加して送信ボタンを押すことを許可しないことです。

ngAfterViewInit() {
this.addProjectForm.valueChanges.subscribe(data => {
  //console.log(data)

  if(data.title.length != 0 &&
    data.description.length != 0 &&
    data.ddemployees.length != 0 &&
    data.competences.includes(true) &&
    data.methods.includes(true) &&
    data.enddate.length != 0 &&
    data.contactname.length != 0 &&
    data.contactemail.length != 0 &&
    data.contactphonenumber.length != 0 
    ) {
    //console.log(data.title.length)
    this.allowSubmit = true;
  } 
});

}

0
Mohammed