web-dev-qa-db-ja.com

送信後にAngular 2のフォームをリセットする

Angular 2には現在、フォームを元の状態に簡単にリセットする方法がないことがわかりました。私は、フォームフィールドをリセットする以下のような解決策を見つけました。

コントロールグループを削除してフォームを元の状態に戻すために新しいコントロールグループを作成する必要があることが示唆されています。私はこれを行うための最善の方法を考え出すのに苦労しています。フォーム構築を関数内でラップする必要があることは知っていますが、コンストラクター内でフォーム構築を実行するとエラーが発生します。

フォームを完全にリセットするためにコントロールグループを再構築するための最良の方法は何ですか？

class App {

    name: Control;
    username: Control;
    email: Control;

    form: ControlGroup;

    constructor(private builder: FormBuilder) {

        this.name = new Control('', Validators.required);
        this.email = new Control('', Validators.required);
        this.username = new Control('', Validators.required);

        this.form = builder.group({
            name: this.name,
            email: this.email,
            username: this.username
        });
    }

    onSubmit(value: any): void {  
        // code that happens when form is submitted
        // then reset the form
        this.reset();
    }

    reset() {
        for (let name in this.form.controls) {
            this.form.controls[name].updateValue('');
            this.form.controls[name].setErrors(null);
        }
    }
}
angularangular2-forms
59
lukemcd

> = RC.6

フォームのリセットをサポートし、submitted状態を維持します。

console.log(this.form.submitted);

this.form.reset()

または

this.form = new FormGroup()...;

importat update

バリデータのように、フォームが作成されたときの状態にフォームコントロールを設定するには、追加の測定が必要です。

フォームの表示部分（html）に、フォームを表示または非表示にするための*ngIfを追加します。

<form *ngIf="showForm"

フォームのコンポーネント側（* .ts）でこれを行います。

  showForm:boolean = true;

  onSubmit(value:any):void {
    this.showForm = false;
    setTimeout(() => {
    this.reset()
      this.showForm = true;
    });
  }

これはより詳細な例です：

export class CreateParkingComponent implements OnInit {
  createParkingForm: FormGroup ;
  showForm = true ;

  constructor(
    private formBuilder: FormBuilder,
    private parkingService: ParkingService,
    private snackBar: MatSnackBar) {

      this.prepareForm() ;
  }

  prepareForm() {
    this.createParkingForm = this.formBuilder.group({
      'name': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
      'company': ['', Validators.minLength(5)],
      'city': ['', Validators.required],
      'address': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'latitude': [''],
      'longitude': [''],
      'phone': ['', Validators.compose([Validators.required, Validators.minLength(7)])],
      'pictureUrl': [''],
      // process the 3 input values of the maxCapacity'
      'pricingText': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'ceilingType': ['', Validators.required],
    });
  }

  ngOnInit() {
  }


  resetForm(form: FormGroup) {
    this.prepareForm();
  }

  createParkingSubmit() {
    // Hide the form while the submit is done
    this.showForm = false ;

    // In this case call the backend and react to the success or fail answer

    this.parkingService.create(p).subscribe(
      response => {
        console.log(response);
        this.snackBar.open('Parqueadero creado', 'X', {duration: 3000});
        setTimeout(() => {
          //reset the form and show it again
          this.prepareForm();
            this.showForm = true;
          });
      }
      , error => {
        console.log(error);
        this.showForm = true ;
        this.snackBar.open('ERROR: al crear Parqueadero:' + error.message);
      }
      );
  }
}

プランカーの例

original <= RC.5フォームを作成するコードをメソッドに移動し、submitを処理した後にもう一度呼び出します。

@Component({
  selector: 'form-component',
  template: `
    <form (ngSubmit)="onSubmit($event)" [ngFormModel]="form">
       <input type="test" ngControl="name">
       <input type="test" ngControl="email">
       <input type="test" ngControl="username">
       <button type="submit">submit</button>
    </form>
    <div>name: {{name.value}}</div>
    <div>email: {{email.value}}</div>
    <div>username: {{username.value}}</div>
`
})
class FormComponent {

  name:Control;
  username:Control;
  email:Control;

  form:ControlGroup;

  constructor(private builder:FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.name = new Control('', Validators.required);
    this.email = new Control('', Validators.required);
    this.username = new Control('', Validators.required);

    this.form = this.builder.group({
      name: this.name,
      email: this.email,
      username: this.username
    });
  }

  onSubmit(value:any):void {
    // code that happens when form is submitted
    // then reset the form
    this.reset();
  }

  reset() {
    this.createForm();
  }
}

プランカーの例

73
Günter Zöchbauer

NgFormのパブリックAPIに正式に文書化されている方法であるため、.resetForm()ではなくNgFormの.reset()を使用してください。 （Ref [ 1 ]）

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">

.resetForm()メソッドはNgFormのFormGroupをリ​​セットし、submitフラグをfalseに設定します（[ 2 ]を参照）。

@angularバージョン2.4.8および4.0.0-rc3でテスト済み

26
Somo S.

Angular 2 Finalに、フォームをきれいにリセットする新しいAPIがあります。

@Component({...})
class App {

    form: FormGroup;
     ...
    reset() {
       this.form.reset();
   }
}

このAPIはフォームの値をリセットするだけでなく、フォームフィールドの状態をng-pristineおよびng-untouchedに戻します。

25
Angular University

reset()関数のみを呼び出した場合、フォームコントロールは元の状態に設定されません。 Android.ioのドキュメントにこの問題に対する解決策があります。

component.ts

  active = true; 

  resetForm() {
      this.form.reset();
      this.active = false;
      setTimeout(() => this.active = true, 0);
  }

component.html

<form *ngIf="active">
6
Asim Olmez

私が正しい道を進んでいるかどうかはわかりませんが、次のform/submitタグを使用して、2.4.8に取り組んでいます。

<form #heroForm="ngForm" (ngSubmit)="add(newHero); heroForm.reset()">
<!-- place your input stuff here -->
<button type="submit" class="btn btn-default" [disabled]="!heroForm.valid">Add hero</button>

トリックをしているようで、フォームのフィールドを再び "pristine"に設定します。

6
Christof Kälin

フォームのAngular基本ガイドを読み、フォームの再設定のセクションに当たったとき、彼らが与える解決策に関して以下を読んだとき、私は非常に驚きました。

適切なフォームリセット機能を待つ間、これは一時的な回避策です。

私は個人的に彼らが提供した回避策がうまくいくかどうかテストしませんでした（私はそれがすると思います）が、私はそれがきちんとしていない、そして問題に取り組むよりよい方法がなければならないことを信じる。

FormGroup API （安定版としてマークされています）によると、既に 'reset'メソッドがあります。

私は以下を試しました。私のtemplate.htmlファイルで私は持っていた

<form (ngSubmit)="register(); registrationForm.reset();" #registrationForm="ngForm">
    ...
</form>

Form要素の中で、テンプレート参照変数 'registrationForm'を初期化し、それを ngForm Directive に初期化しました。これは「フォーム全体を管理する」ということです。これにより、reset（）メソッドを含む、管理しているFormGroupのメソッドと属性にアクセスできました。

上記のようにこのメソッド呼び出しをngSubmitイベントにバインドすると、register（）メソッドが完了した後でフォーム（元の状態、ダーティ状態、モデル状態などを含む）がリセットされます。デモではこれで問題ありませんが、実際のアプリケーションではあまり役に立ちません。

Register（）メソッドがサーバーへの呼び出しを実行したとします。サーバーがすべてに問題がないと応答したことがわかったら、フォームをリセットします。このシナリオでは、コードを以下のように更新します。

私のtemplate.htmlファイルで：

<form (ngSubmit)="register(registrationForm);" #registrationForm="ngForm">
    ...
</form>

そして私のcomponent.tsファイルで：

@Component({
  ...
})
export class RegistrationComponent {
  register(form: FormGroup) {

   ...

   // Somewhere within the asynchronous call resolve function
   form.reset();
  }
}

メソッドに 'registrationForm'参照を渡すことで、実行したい時点でresetメソッドを呼び出すことができます。

これがどんな意味でも役立つことを願っています。 :)

注：このアプローチはAngular 2.0.0-rc.5に基づいています。

6
JeanPaul A.

私は反応形を角度4で使っています、そしてこのアプローチは私のために働きます：

    this.profileEditForm.reset(this.profileEditForm.value);

fundamentalsドキュメントの フォームフラグをリセットする を参照してください。

0
mike tannel

以下のフォーマットを使用してください。私にとっては完璧に動作します。たくさんの方法をチェックしましたが、これは完璧に動作します。<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm"> .... </form>

0
Giri vrc

誰かが使用できる特定のフォームコントロールだけをクリアしたい場合

formSubmit(){
this.formName.patchValue({
         formControlName:''
          //or if one wants to change formControl to a different value on submit
          formControlName:'form value after submission'     
    });
}
0
Sai Krishna

私はGünterZöchbauerからの答えを同じような場合に使用しました、そしてそれは私にはぴったりでした、フォーム作成を関数に移して、ngOnInit（）からそれを呼び出すこと。

説明のために、フィールドの初期化も含めて、このようにしました。

ngOnInit() {
    // initializing the form model here
    this.createForm();
}

createForm() {
    let EMAIL_REGEXP = /^[^@]+@([^@\.]+\.)+[^@\.]+$/i; // here just to add something more, useful too

    this.userForm = new FormGroup({
        name: new FormControl('', [Validators.required, Validators.minLength(3)]),
        city: new FormControl(''),
        email: new FormControl(null, Validators.pattern(EMAIL_REGEXP))
    });

    this.initializeFormValues();
}

initializeFormValues() {
    const people = {
        name: '',
        city: 'Rio de Janeiro',  // Only for demonstration
        email: ''
    };
    (<FormGroup>this.userForm).setValue(people, { onlySelf: true });
}

resetForm() {
    this.createForm();
    this.submitted = false;
}

スマートリセットのためのボタンをフォームに追加しました（フィールドの初期化）。

HTMLファイル（またはインラインテンプレート）の場合：

<button type="button" [disabled]="userForm.pristine" (click)="resetForm()">Reset</button>

最初にフォームをロードした後、またはリセットボタンをクリックした後、次のステータスになります。

FORM pristine: true 
FORM valid: false (because I have required a field) 
FORM submitted: false
Name pristine: true
City pristine: true
Email pristine: true

そして、単純なform.reset（）が私たちのためにしない全てのフィールド初期化！ :-)

0
Julio Ventura