Enable/disable a button based on Http response

Question

I am currently developing an Angular App with .net as Backend. I am looking for guidance on how to Enable a button in Angular, when an ajax post request is successful or when the response is ready on backend(c#).

appcomponent.html

 <button mat-button (click) = "cvalid()" >submit</button>
 <button mat-button id="getdoc" (click) = "getdoc()" [disabled] = "disabled" >Download</button>

appcomponent.ts

cvalid(){
 $.ajax({
    type: "POST", 
    url: 'http://localhost:5000/api/D/Postdata',       
    data: d1,
   contentType: "application/json",    
  success: function (data) {
    console.log(data)
    console.log(typeof(data));
    this.disabled = false ; //button trigger .
  }, 
  error: function (data) {
      console.log('error in sending data...:(');

 },
  });
}

controller

  [HttpPost]
   public IActionResult Postdata([FromBody] RootObject data)
   {
        var data1 = JsonConvert.SerializeObject(data)
        return Ok(data1);

   }

Please guide me regarding this. Thanks in Advance.

I doubt if your disabled is being set, can you see the value of data in console? If you use arrow function then probably it will be set correctly. And why are you using jquery in angular, you should use httpClient provided by angular. — Anand Bhushan
– Anand Bhushan, Commented Oct 10, 2019 at 9:15

Adrita Sharma · Accepted Answer · 2019-10-10 06:16:00Z

1

Declare that = this so you have a reference of this

Try like this:

cvalid(){
 this.disabled = true;
 var that = this;
 $.ajax({
    type: "POST", 
    url: 'http://localhost:5000/api/D/Postdata',       
    data: d1,
   contentType: "application/json",    
  success: function (data) {
    console.log(data)
    console.log(typeof(data));
    that.disabled = false ; //button trigger .
  }, 
  error: function (data) {
      console.log('error in sending data...:(');

 },
  });
}

Note: In Angular, you should use HttpClient

edited Oct 10, 2019 at 6:16

answered Oct 10, 2019 at 6:10

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iftifar Taz Over a year ago

This will work but as suggested please consider using HttpClient.

Collectives™ on Stack Overflow

Enable/disable a button based on Http response

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related