2016-11-19 7 views
0

現在、ウェブサイトのプロフィールページを作成中です。ページの下部に送信ボタンがあります。ユーザーがページを表示しているときは、何も変更されていないため、送信ボタンは無効になります。Angular2 HTTPポストリクエストで無効にされた後に送信ボタンを再度有効にします。

何かが変更されて有効になると、ボタンがクリック可能になります。その後、HTTP Postを介して送信した後、成功した場合は、それをunclickableにするフラグがあり、成功メッセージが表示されます。これ以上のものはすべて問題ありません。

ただし、ユーザーがコンテンツを再度変更すると問題が発生します。フラグが使用されていたため、フラグは常にボタンを無効にしています。 問題を解決するには、2つのアプローチがあると思います。 1つは、コンテンツが再び変更されたときにフラグを切り替えることです。 1つは、全く違った方法でボタンを無効にすることです。しかし、私はどちらかを行う方法がわかりません。

TSコード:

@Component({ 
    moduleId: module.id, 
    selector: 'profile', 
    templateUrl: 'profile.component.html', 
}) 
export class ProfileComponent{ 
    name: string; 
    email: string; 
    updateSucc : boolean = false; 
    profileForm : FormGroup; 

    constructor(fb: FormBuilder, private http:Http) { 

    this.profileForm = fb.group({ 
     'name' : ['', Validators.required], 
     'email': [''], 
    }) 

    submitForm(value: any){ 

    let form = { 
     'updates': { 
     'name' : value.name 
     } 
    } 

    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers, 
            withCredentials: true }); 

    this.http.post('http://SERVER.API?email='+localStorage.getItem('email'), form, options).subscribe(
     (res:any)=>{ 
      this.updateSucc = true; 
      }, 
     error => { 
      console.log(error); 
      this.backendService.checkLogIn(error.status); 
     } 
    ) 
    } 
} 

HTMLコード:

<div class="container"> 
<h1>Profile</h1> 
    <div *ngIf = "updateSucc" class="alert alert-success"> 
    Update successful! 
    </div> 
<form [formGroup]="profileForm" (ngSubmit)="submitForm(profileForm.value)"> 
    <div class="form-group" 
    [ngClass]="{'has-error':!profileForm.controls['name'].valid && profileForm.controls['name'].touched}" 
    > 
    <label for="name">Name</label> 
    <input type="text" class="form-control" id="name" 
    [formControl]="profileForm.controls['name']" 
    [(ngModel)] = 'name' name = 'name' 
    > 
    </div> 

    <div class="form-group" 
    [ngClass]="{'has-error':!profileForm.controls['email'].valid && profileForm.controls['email'].touched}" 
    > 
    <label for="email">Email</label> 
    <input type="text" class="form-control" id="email" 
    [formControl]="profileForm.controls['email']" 
    [(ngModel)] = 'email' name = 'email' 
    readonly 
    > 
    </div> 
    <button type="submit" class="btn btn-default" 
      [disabled]="!profileForm.valid 

         || !(profileForm.controls['name'].dirty 
         || profileForm.controls['email'].dirty 
         ) 
         || updateSucc 

      ">Submit</button> 
</form> 
</div> 

変数updateSuccフラグです。

答えて

0

このフォームには、最初に表示されるときに、いくつかのコンテンツが含まれることがあります(このオリジナルコンテンツを呼び出してください)。 ユーザーがフォームデータを有効な方法で変更したとき(ボタンが有効になるように)、アプリケーションが元の状態に戻り、再び元の内容に戻ります。

この場合、ボタンを無効にする必要がある場合は、[disabled]属性を、ORIGINAL-CONTENT(変数に格納する必要があります。ngOnInit)と現在のフォームの内容を比較するメソッドにリンクする必要があります。

そうでなければ、私はあなたの実装を続けるだろう(多分updateSuccからあなたの変数のフラグの名前を変更をsubmitButtonDisabled)、フォームのonChangeイベントによってトリガonChange()方法でtrueにフラグの値を設定します。

私はこれが役立つことを望みます。

関連する問題