角度表单提交中必须填写此字段

Question

我正在尝试发布请求，但无法坐下显示 400错误的请求，响应是此字段为必填项。请求有效负载显示空对象。

  

service.ts

sendRole(data){
let headers = new Headers({ 'Content-Type': 'application/json' 
}).set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
var options =  {
  headers: headers
};
return this.httpClient.post('api/auth/role/', data, this.options)
.map((res:Response)=> res.json())
.catch(this.handleErrorObservable); 
}

private handleErrorObservable (error: Response | any) {
console.error(error.message || error);
return Observable.throw(error.message || error);
}

  

component.ts

addRole(){
  this.Authentication.sendRole(this.role)
  .subscribe(role=> this.roles =role)
}

  

component.html

<div class="modal-body">
        <form>
          <div class="form-group">
            <label for="text">Role:</label>
            <input type="text" class="form-control" id="text" name="role" #role>
          </div>

          <button type="submit" class="btn btn-primary" (click)="addRole(role.value)">Submit</button>
        </form>
</div>

网络标签

请求有效载荷
>

网络响应
>

Answer 1

您在role的{​​{1}}函数中没有得到addRole()。将您的组件代码更改为如下所示

在模板中，您正在传递onclick

role

在 ts 文件中，如下所示更改代码

<button type="submit" class="btn btn-primary" (click)="addRole(role.value)">Submit</button>

工作示例在Stackblitz

中