#angular #html #typescript
#angular #HTML #typescript
Вопрос:
У меня есть форма в Angular 6, и у меня есть таблица, которая получает данные из web api. Возможно ли отправить эти данные формы в этот веб-api? У меня есть макет URL веб-api, который является запросом get. Мой код на данный момент:
Html-форма:
<form class="form-horizontal" [formGroup]="serviceForm" (ngSubmit)="onSubmit()">
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_caller_id">On behalf of this user: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<select formControlName="u_caller_id" class="form-select" required>
<option *ngFor="let user of users" [ngValue]="user">
{{ user.id }}
</option>
</select>
<div *ngIf="serviceForm.get('u_caller_id').errors amp;amp; (serviceForm.get('u_caller_id').touched || serviceForm.get('u_caller_id').dirty)">
<div *ngIf="serviceForm.get('u_caller_id').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_destination_country">Your location: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<select formControlName="u_destination_country" class="form-select">
<option *ngFor="let state of countries" [ngValue]="state">
{{ state.name }}
</option>
</select>
<div *ngIf="serviceForm.get('u_destination_country').errors amp;amp; (serviceForm.get('u_destination_country').touched || serviceForm.get('u_destination_country').dirty)">
<div *ngIf="serviceForm.get('u_destination_country').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_requester_phone_number">Phone number: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<input class="form-input" type="text" id="u_requester_phone_number" placeholder="Enter phone number" type="number"
formControlName="u_requester_phone_number" required>
<div *ngIf="serviceForm.get('u_requester_phone_number').errors amp;amp; (serviceForm.get('u_requester_phone_number').touched || serviceForm.get('u_requester_phone_number').dirty)">
<div *ngIf="serviceForm.get('u_requester_phone_number').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="u_serial_number">Device/Asset: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<select formControlName="u_serial_number" class="form-select" required>
<option *ngFor="let device of devices" [ngValue]="device">
{{ device.id }}
</option>
</select>
<div *ngIf="serviceForm.get('u_serial_number').errors amp;amp; (serviceForm.get('u_serial_number').touched || serviceForm.get('u_serial_number').dirty)">
<div *ngIf="serviceForm.get('u_serial_number').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="subject">Subject: <sub class="text-secondary">*</sub></label>
</div>
<div class="col-4 col-sm-12">
<input class="form-input" type="text" id="subject" placeholder="Enter subject" type="text" formControlName="subject"
required>
<div *ngIf="serviceForm.get('subject').errors amp;amp; (serviceForm.get('subject').touched || serviceForm.get('subject').dirty)">
<div *ngIf="serviceForm.get('subject').hasError('required')" class="mt-2 mb-2">
<h6 class="text-error">This field is required</h6>
</div>
</div>
<h6 class="text-gray mt-2">Please note maximum length is 80 characters.</h6>
</div>
</div>
<div class="form-group mb-8">
<div class="col-3 col-sm-12">
<label class="form-label" for="describe">Please describe your issue:</label>
</div>
<div class="col-4 col-sm-12">
<textarea class="form-input" id="describe" placeholder="Describe your issue" rows="3" formControlName="issue"></textarea>
<h6 class="text-gray mt-2">The more information you can provide here, the easier time the organization will
have in diagnosing and resolving your issue.
</h6>
</div>
</div>
<div class="columns col-12 col-sm-12">
<div class="column col-10 col-sm-6 text-right">
<button class="btn btn-link">Cancel</button>
</div>
<div class="column col-2 col-sm-6">
<!--<a routerLink="/incident">--><button class="btn btn-primary" type="submit">Submit</button><!--</a>-->
</div>
</div>
</form>
TS-файл
onSubmit(serviceForm) {
console.log("Service form submitted");
var data = "u_caller_id=" serviceForm.u_caller_id "amp;u_destination_country=" serviceForm.u_destination_country "amp;u_requester_phone_number=" serviceForm.u_requester_phone_number;
this.http.post("https://demo1049220.mockable.io/api/incident", data).subscribe((data) => {});
console.log("data has gone");
}
}
service.ts (для получения данных веб-api)
serviceApiUrl: string = 'https://demo1049220.mockable.io/api/incident';
constructor(
private http: HttpClient,
) { }
public getAll() {
return this.http.get(this.serviceApiUrl);
}
}
Итак, я немного запутался в том, как этого добиться, любая помощь была бы отличной.
Ответ №1:
Кажется, вы пытаетесь вызвать onSubmit(), но в вашем файле .ts у вас есть onSubmit(serviceForm), поскольку вы используете FormGroup, вы можете получить значения из нее с помощью «this.serviceForm.value», а не передавать функции onSubmit в качестве аргумента. Таким образом, вы можете использовать его следующим образом:
onSubmit() {
var data = "u_caller_id=" this.serviceForm.value.u_caller_id "amp;u_destination_country=" this.serviceForm.value.u_destination_country "amp;u_requester_phone_number=" this.serviceForm.value.u_requester_phone_number;
this.http.post("https://demo1049220.mockable.io/api/incident", data).subscribe((res) => {});
console.log("data has gone");
}
Это правильный способ передачи значений формы в ваш http-запрос. Также имя «data» может затенять результат (data) вашей подписки, поэтому измените его название на что-то вроде (res), как я сделал.
Ответ №2:
Поверх ts-файла импортируйте «HttpHeaders» из «@angular/common/http»:
import { HttpHeaders } from @angular/common/http;
Затем обновите свой метод onSubmit, как показано ниже:
onSubmit(){
this.http.post("https://demo1049220.mockable.io/api/incident",
this.serviceForm.value,
{
headers : new HttpHeaders().set("Content-Type","application/json")
}
).subscribe((response : any)=>{
console.log(response);//On success response
},(errorResponse : any)=>{
console.log(errorResponse);//On unsuccessful response
});
}
Если данные были отправлены успешно и сервер отправил успешный ответ с 200 Ok, вы получите успешный ответ в первой функции обратного вызова, или же будет вызвана вторая функция обратного вызова, и ваш ответ будет в переменной «ErrorResponse».