現在、ウェブサイトのプロフィールページを作成中です。ページの下部に送信ボタンがあります。ユーザーがページを表示しているときは、何も変更されていないため、送信ボタンは無効になります。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
フラグです。