I have a form to insert products, the send button must be deactivated while the server makes the request that may be true or false.
Then whether true or false, an alert will be shown confirming or not. (With Clarity)
When you have an alert you get an 'x' to close the alert, the problem is that if you close the alert, no more alert is ever displayed. Then I removed the possibility for the user to remove them using the 'x'. Then I need a Timer to go closing the alerts.
insert(formModifyConfig: NgForm) {
const url = 'http://localhost:8080/insert';
this.service.insert(url , this.product).subscribe(param => {
let params = JSON.parse(param);
this.myMessage.success = params.success;
this.myMessage.message = params.message;
if ( this.myMessage.success) {
this.openModalUpdate = false;
this.confirmedServer = true;
} else {
this.errorServer = true;
}
}, error => {
this.errorServer = true;
this.myMessage.message = "Error Server";
});
}
Here I tried with:
When the button is given, deactivate it
formModifyConfig.status = false; --> Second error.
formModifyConfig.form.invalid = true; --> Second error.
formModifyConfig.form.invalid() etc
But it does not work because it says it's a constant and you can not change the value.
Later when the request has been resolved, put it back.
error => {
this.errorServer = true;
this.myMessage.message = "Error Server";
},OnCompleted => {
formModifyConfig.enable;
});
HTML
<h3 class="modal-title">Insert{{ staticParamName }}</h3>
<div class="modal-body">
<clr-alert [clrAlertClosable]="false" [clrAlertType]="'alert-danger'" *ngIf="errorServer">
<clr-alert-item>
<span class="alert-text">
{{ this.myMessage.message }}
</span>
</clr-alert-item>
</clr-alert>
<div class="form-group row">
<div class="col-xs-4">
<label for="nameParameter">Name: </label>
</div>
<div class="col-xs-8">
<input type="text" id="nameParameter" name="nameParameter" class="form-control" [(ngModel)]="insert.parameter" required>
</div>
</div>
<div class="form-group row">
<div class="col-xs-4">
<label for="description">Description: </label>
</div>
<div class="col-xs-8">
<input type="text" id="description" name="description" class="form-control" [(ngModel)]="insert.description">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" [disabled]="insertConfig.form.invalid">Insert</button>
<button type="button" class="btn btn-outline" (click)="openModalUpdate = false">Cancel</button>
</div>
</clr-modal>
</form>
Finally to be able to close the messages with time I have looked link
And they do not have the timer, they have to disable the 'x'
I hope it has been clear the 2 problems I have, if you need more explanation or better, do not hesitate to ask for it. Thank you.