将数据发送到 api 以及使用 angular 的表单中的所有数据

Question

我是新手，所以如果我问了一些小问题或错误的问题，请不要误会我

<form >
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
</form>
<button>submit<button>

我想通过 angular

将所有值发送到 api

Answer 1

如果您正在使用 angular，您应该知道：https://material.angular.io/guides

你的angularhtml

<form [formgroup] = formname>
  <label for="fname">First name:</label>
  <input formControlname=name type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input formControlname=name type="text" id="lname" name="lname"><br><br>
</form>
<button (click)="submitdata()">submit<button>

你的 TS 文件

import{HttpClient}............
import{FormBuilder, FormGroup, Validators, FormControl}........
const(private formbuilder:FormBuilder, private http:HttpClient)
formname!:formgroup;
ngOnInit{
this.formname = this.formbuilder.group({
name : ['',validators.required];
lname : ['', validators.required];
})
}
submitdata(){
this.http.post('your_url', this.formname.value)
}

将数据发送到 api 以及使用 angular 的表单中的所有数据

sending data to api with all data from form using angular

html

api

angular