Я хочу отправить пользовательскую форму prfile обратно на сервер с помощью API, но она не обновляется, функция отправки не вызывается
но здесь я не знаю, чем занимаюсь.
Если отладка и проверка данных журнала когда-то показывает, что данные иногда нет.
Вот мой код формы HTML
<form [formGroup]='updateProfileForm' (ngSubmit)='onSubmit(updateProfileForm.value)'>
<div class="form-group label-floating">
<label class="control-label " for="name">Name</label>
<input type="text" class="form-control" formControlName='name'>
<app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'name')">
</app-field-error-display>
</div>
<div class="form-group label-floating">
<label class="control-label " for="name">Date of Birth</label>
<input type="text" class="form-control" formControlName='dob' id='dob' value="{{ dob | date:'dd-MMM-yyyy' }}" [readonly]="true">
<!-- <app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'dob')">
</app-field-error-display> -->
<span class='error-msg'></span>
</div>
<div class="form-group label-floating">
<label class="control-label">Email</label>
<input type="text" class="form-control" formControlName='email'>
<app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'email')">
</app-field-error-display>
</div>
<div class="form-group label-floating">
<div class="form-group">
<label class="control-label">Phone</label>
<!-- <label class="control-label">Code</label> -->
<!-- <div class="input-group"> -->
<input type="text" class="form-control" formControlName='code' id ="txtVerifyPhoneCode"(keypress)="this.validationService.checkNumber($event)">
<input type="text" class="form-control" formControlName='phone' id ="txtVerifyPhone"(keypress)="this.validationService.checkNumber($event)">
<!-- <label class="control-label">Phone</label> -->
</div>
<!-- <div class="input-group-btn"> -->
<button type="button" id="verifymebutton" class="btn btn-primary pull-right" (click) ="sendOTPmain1()">Verify</button>
<!-- </div></div> -->
<!-- </div> -->
<!-- <span class="button" *ngIf="varified"><br> -->
<i class="fa fa-check main-content__checkmark success pull-right" id="checkmark1" style="font-size: 30px;" *ngIf="varified"></i>
<!-- </span> -->
<!-- <div class="col-sm-2">
<ng-template #NotVarified>
<button type="button" class="btn btn-info btn-lg" id="openOTPModel" (click)="sendOTPmain()" >Verify</button>
</ng-template></div> -->
<app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'phone')">
</app-field-error-display>
</div>
<div class="form-group label-floating div_gender">
<label class="radio-inline">
<span class="control-label gender_row">Gender </span>
<input type="radio" name="gender" value="1" formControlName='gender' [checked]="gender===1">Male
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="2" formControlName='gender' [checked]="gender===2">Female
</label>
<!-- <label class="radio-inline">
<input type="radio" name="gender" value="3" formControlName='gender' [checked]="gender===3">Other
</label> -->
<label class="radio-inline">
<input type="radio" name="gender" value="3" formControlName='gender' [checked]="gender===4">Don't want to disclose
</label>
</div>
<div class="form-group label-floating select_lang">
<label class="control-label">Country</label>
<select class='form-control' name='country_id' id="country_id" formControlName='country_id' (change)="selectedCountry($event)" >
<option *ngFor='let country of countryList' [ngValue]="country._id">{{ country.country }}</option>
<app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'country_id')">
</app-field-error-display>
</select>
</div>
<div class="form-group label-floating select_lang">
<label class="control-label">Language</label>
<select class='form-control' name='language_id' formControlName='language_id'>
<option *ngFor='let language of languageList' [ngValue]="language._id">{{ language.language }}</option>
<app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'language_id')">
</app-field-error-display>
</select>
</div>
<div class="form-group label-floating select_lang">
<label class="control-label">Field</label>
<select class="form-control" name="category_id" formControlName="category_id" (change)="onChange($event.target.value)">
<!-- <option value="" d>Select Category (required)</option> -->
<option *ngFor='let surveyCategory of surveyCategoryList' [ngValue]="surveyCategory._id" >{{ surveyCategory.category }}</option>
<app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'category_id')">
</app-field-error-display>
</select>
</div>
<div class="form-group label-floating select_lang">
<label class="control-label">Profession</label>
<select class="form-control" name="profession_id" formControlName="profession_id">
<!-- <option value="" >Select Category (required)</option> -->
<option *ngFor='let profession of ProfessionList' [ngValue]="profession._id">{{ profession.profession }}</option>
<app-field-error-display [displayError]="this.validationService.isFieldValid(updateProfileForm,'profession_id')">
</app-field-error-display>
</select>
</div>
<div class="form-group label-floating select_lang">
<label class="control-label">View Video</label>
<!-- <select class="form-control" name="view_video" formControlName="videoviewstatus"> -->
<!-- <toggle [on]="true" (toggled)="showMessage($event)"></toggle> -->
<!-- <mat-slide-toggle [formControl]="autoRenew">Auto-Renew</mat-slide-toggle> -->
</div>
<div class="form-group label-floating" >
<!-- <label class="control-label">Video Status</label><br/>
<ui-switch labelOn="Yes" labelOff="No" formControlName='videoviewstatus' [checked]="videoviewstatus===true" ></ui-switch>
-->
<!-- <input type="checkbox" class="toggle-checkbox" [id]="videoviewstatus">
<span [ngClass]="videoviewstatus ? 'toggler on' : 'toggler on off'"> </span> -->
<label class="switch" formControlName= 'videoviewstatus'>
<!-- <div ng-if="videostatus = true"> -->
<input type="checkbox" name="checkbox1" checked="">
<span class="slider round"></span>
<!-- </div> -->
</label>
</div>
<div class="form-group">
<div class="pull-right">
<input type="submit" class="btn btn-primary" (click)="verifymyphone()" id="updateProfile" value="Update">
</div>
</div>
</form>
Вот функция отправки в тс.
// обновить профиль
onSubmit = function (data) {
if (!this.updateProfileForm.valid) {
this.validationService.validateAllFormFields(this.updateProfileForm);
return;
}
var dob = $('#dob').val();
if (dob == '') {
$('.error-msg').html('Date of birth field is required').css('color', '#a94442');
return;
} else {
var dt = dob.split('-');
data.dob = new Date(dt[2], "JanFebMarAprMayJunJulAugSepOctNovDec".indexOf(dt[1]) / 3, dt[0]);
}
if (!this.select_country) {
this.select_country = $('#country_id :selected').text();
}
if (!this.select_field) {
this.select_field = $('#category_id :selected').text();
}
if (!this.select_profession) {
this.select_profession = $('#profession_id :selected').text();
}
if (this.current_location.toLowerCase() != this.select_country.toLowerCase()) {
$.growl.error({
title: 'Error',
message: "Selected country is different from your current location"
});
return;
}
var word = this.checkCensoredWordsSingle(data.name)
if (word) {
$.growl.error({
title: 'Error',
message: "Name should not contain any censored word like : " + word
});
return;
}
data.phone = "" + data.phone;
data.gender = $('input[name=gender]:checked').val();
// if()
// if(data.videoviewstatus==true)
// {
// }
$("#updateProfile").val("UPDATING...").attr("disabled", true);
this.authService.updateProfile(data).subscribe(data => {
debugger;
if (data.success) {
$.growl.notice({
title: 'Success',
message: data.message
});
} else {
$.growl.error({
title: 'Error',
message: data.error
});
}
$("#updateProfile").val("UPDATE").attr("disabled", false);
});
}
и вот код файла service.ts здесь
// Update profile
updateProfile = function (data) {
debugger;
return this.http.put(this.api_url + 'update', JSON.stringify(data), this.getAuthHeaderOption()).map(res => res.json());
}
мой взгляд выглядит ниже
введите описание изображения здесь