Angular2 + material - フォームの読み込み方法

Question

私はangular2アプリで材料不確定スピナーを使用しています。

https://material.angular.io/components/progress-spinner/examples

は、どのように私は、ユーザーのキーを押して、フォームにボタンを送るこのスピナーを、示すべきです。

フォームをスピナーでカバーする必要がありますか？ いくつかの移行フォームを作成します - >スピナー？ 他に何か？

正常にリクエストされると、別のビューへのルートが変更されます。

Answer 1

この種のイベントを管理するために最も視覚的に気に入って最も効果的な方法の1つは、フォームと同じレベルにローディングdivを実装し、フォームのdivに状態をスワップするようにngIfを使用することですクリックし提出：

<div class="parent-div"> 
    <form *ngIf="!isSubmitted"> 
    ... 
    <buttom type="submit" (click)="isSubmitted=true;"> 
    </form> 
    <div class="loading-div" *ngIf="isSubmitted"> 
    <md-spinner></md-spinner><br> 
    Submitting data... 
    </div> 
</div> 

これは、一般的なHTMLテンプレート構造ですが、あなたがメモしておきたいと思うでしょうがいくつかあります。

• あなたはおそらく、あなたのフォームは上のメソッドを呼び出すことになるでしょうが投稿はisSubmitted=trueになります。
• parent-divクラスが入力されている限り、.loading-div { width: 100%, height: 100%, z-index: 100 }を作成することができます。これにより、スピナーにクラスを追加してdivの中央に配置することもできます。
• この方法は、フォームの重複した送信を防止します。
• ローディングコンテナに*ngIfを追加し、サブミットボタンに[disabled]="isSubmitted"を追加することをお勧めします。この方法を使用すると、透明な背景を使用してデータを表示することはできますが、フォームが明示されていることを明示的に表現できます。