Angular: Add value to input from onClick event button - html

I'm trying to make an Edit Modal using Angular. the td fields get a value from this table and send it to a modal using the (click) event
<tbody>
<tr *ngFor="let mascota of mascotas" class="text-center ">
<td>{{mascota.name}}</td>
<td>{{mascota.birthDate}}</td>
<td>{{mascota.species.name}}</td>
<td>
<button class="btn btn-info mx-2">Detalles</button>
<button class="btn btn-warning mx-2" (click)="openSM(contenido,mascota)">Editar</button>
<button class="btn btn-danger mx-2">Remover</button>
</td>
</tr>
</tbody>
This is the function that I made in the component, used a const in order to get the values and send it to the modal
openSM(contenido, mascota) {
const modalRef = this.modal.open(contenido,{size:'lg',centered:true});
modalRef["mascota"] = mascota;
console.log(modalRef);
}
And this is the modal where I'm tying to get the value
<ng-template #contenido let-modal>
<div class="modal-header">
<h4 class="modal-title">Editar datos de mascota</h4>
<button class="close" aria-label="close" type="button" (click)="modal.close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal form-material" id="editform" autocomplete="off">
<div class="form-group m-t-10">
<div class="col-sm-10">
<label>Nombre de Mascota:</label>
<input class="form-control" type="text" placeholder="Nombre" value="mascota.name" />
</div>
</div>
</form>
</div>
</ng-template>
But when I click on the Edit button it didn't recognize the value
And when I used {{}} the const get an 'undefined' value
Error from Inspect Element
Contenido Data
Is there any way to get that value and put it into the input tag? I want to do the same with the others td fields, but first this needs to work well
Console log of the inputs in the constructor

Related

use ngModel inside <p> tag in Angular 8

Html code:
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button type="button" class="btn btn-sm btn-primary product-btn" (click)="addCard()">Add Card</button>"
Here I also want to bind the value "card.color" into another variable (maybe using ngModel) so that I can use it inside my typescript file in angular 8.
I tried the below but not working:
<p class="card-text" [(ngModel)]="cardColor">Card Color: {{card.color}}</p>
You could send the contents to the button click event's handler.
Template (*.html)
<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button
type="button"
class="btn btn-sm btn-primary product-btn"
(click)="addCard(card.color)"
>
Add Card
</button>
Controller (*.ts)
addCard(color: any) {
// use `color` here
}

Focus on timepicker instead of modal window

My modal window is blocking my time picker on Angular
Component.ts
open() {
const amazingTimePicker = this.atp.open();
amazingTimePicker.afterClose().subscribe(time => {
console.log(time);
});
}
// Triggering the modal window
createApplication(content) {
this.modalService.open(content, {centered: true, size: 'lg'});
}
Modal html
<ng-template #create let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Job Application</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #createApplicationForm="ngForm" (ngSubmit)="createApplicationForm.form.valid && createForm(createApplicationForm)" >
<div class="form-group">
<div class="input-group">
<input class="form-control" id="preferredContactDate" name="preferredContactDate"
[(ngModel)]="newApplicationFormDateModel" ngbDatepicker #preferredContactDate="ngbDatepicker">
<div class="input-group-append">
//Open time picker here
<button class="btn btn-secondary" (click)="open()"
type="button"></button>
</div>
</div>
</div>
<div class="modal-footer">
<!-- Submit button -->
<input class="btn btn-dark" type="submit" value="Create" />
<button type="button" class="btn btn-dark" (click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</form>
</div>
</ng-template>
However, when i do this, the time picker gets blocked by the modal.
Any ideas?
Stackbliz for timepicker - https://stackblitz.com/edit/amazing-timepicker-example
Referenced to: https://www.npmjs.com/package/amazing-time-picker
Modal: https://ng-bootstrap.github.io/#/components/modal/examples
Update based on answer:
<div class="time-picker">
<input atp-time-picker value="19:00"/>
</div>
CSS
.time-picker {
position:absolute;
z-index : 99999999;
}
.my-custom-class{
z-index: 900;
}
I also tried inline style as well
<input style= "z-index: 99999999;" atp-time-picker value="19:00"/>
We need to get the bootstrap's z-index dynamically and increment it with some arbitrary number and set to the time-picket something like below:
$(document).on('show.bs.modal', '.modal', function (event) {
const zIndex = 1045 + (10 * $('.modal:visible').length);
// this zIndex can be assigned to the time-picker
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
you can specify a custom class for the modal to overwrite the z-index.
example:
in your js/ts:
this.modalService.open(content, {backdropClass: 'my-custom-class'});
css:
.my-custom-class{
z-index: 900;
}
Your issue is similar to the one mentioned here : https://github.com/owsolutions/amazing-time-picker/issues/129
The proposed solution, as think win win explained, was to increase the timepicker's z-index :
time-picker {
position:absolute;
z-index : 99999999;
}

Create a form for each checkbox in the foreach loop with Laravel

I am trying to create a form for each item (checkboxes) inside the foreach item and save the item to the database whenever the item is checked.
My problem is even I created a form inside the foreach loop, so every item has its own form; when I do inspect the element I find that all item are included in the same form and only the first checked element is saved to the database
here is my code in order to create a form for each item
#foreach($sessions as $session)
<h1> {{$session->quarter}} {{$session->year}} </h1>
#foreach($courses as $course)
#if($session->id== $course->quarterIDFk)
<form action="{{route('course.add')}}" method="POST" id="report" >
<div class="aa">
<div class="dd">
<button >
<section class="checkboxFour">
<input hidden type="checkbox" id="{{ $course->id}}" name="{{$course->id}}" onclick="showComboBox(id)"; />
<label for="{{ $course->id}}"></label>
</section>
</button>
<label class="class_name" value ="{{ $course->id}}" >{{ $course->courseNumber}}</label>
<input hidden type="number" value="{{ $course->id}}" name ="course"/>
</div>
<div class="select-style" id="check{{ $course->id}}" hidden >
<select name="a">
<option value="" selected disabled hidden>Taken on </option>
<option value="Summer">Summer</option>
<option value="Fall">Fall</option>
<option value="Winter">Winter</option>
<option value="Spring">Spring</option>
</select>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-success" onclick="hideComboBox({{ $course->id}})" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
#endif
#endforeach
</from>
#endforeach
and i used this ajax script so the page doesn't load whenener i click the submit button
<script>
$(function () {
$('#report').submit(function (e) {
e.preventDefault() // prevent the form from 'submitting'
var url = e.target.action // get the target
var formData = $(this).serialize() // get form data
$.post(url, formData, function (response) { // send; response.data will be what is returned
// alert('report sent')
})
})
})
</script>
and here is the controller function to store checked items to the database
public function store(Request $request)
{
if(!empty($request->a))
{
$claass = new Taken_classes ;
$claass->idUser = Auth::user()->id ;
$claass->idCourse = $request->course;
// $claass->idCourse = 12;
$claass->taken_session = $request->a;
$claass->save() ; }
I expect to save each checked item to the database but just the first checked item is saved

Click on submit button, should disable the checkbox button Angular JS

<td>
<input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" ng-click="onacknowledgedClick(alert)">
</td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
When I click on checkbox button, the text textfield with submit button will be popped up. After entering the comments on textfield, when the user clicks on submit button, the checkbox should get disabled. Can anyone give me some inputs on this?
How to disable the checkbox button, once when I click on Submit button?
I'd suggest jQuery:
$("#submit").click(function(){
$("#alertAcknowledged").attr("disabled", true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" id="alertAcknowledged" ng-click="onacknowledgedClick(alert)"></td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)" id="submit"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
You have to use JavaScript to do this. Make an event listener for the submit button that disables the checkbox and the cancel button that does display: none; to the text input. For info about event listeners visit this site: Event Listeners
This is what you should do:
document.getElementById("submit").addEventListener("click", function() {document.getElementById("alertAcknowledged").disabled = true;})
document.getElementById("cancel").addEventListener("click", function() {document.getElementById("text").style.display = "none";})
<td><input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" id="alertAcknowledged" ng-click="onacknowledgedClick(alert)"></td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" id="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)" id="submit"> Submit </button>
<button type="button" id="cancel" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
I would avoid using jquery as much as possible in angular. Here's a good read http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/
So, it looks like your ng-disabled="alert.acknowledged" but ng-click="alert.acknowledged" as well. This means when you click the radio button, alert.acknowledged is set to true, so it gets disabled.
You probably want a different value in ng-disabled, maybe ng-disabled="disableRadioBtn", then in your submit controller you can set $scope.disableRadioBtn = false;
add disableCheckbox as a paramet and set it inside the click function.
HTML
<td>
<input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.disableCheckbox" ng-click="onacknowledgedClick(alert)">
</td>
<td>
<span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span>
<div ng-if="alert.acknowledgeInProgress">
<input type="text" style="height:30px; width:150px" ng-model="alert.acknowledgedComments"/>
<button type="button" class="btn btn-primary" ng-click="saveAlert(alert)"> Submit </button>
<button type="button" class="btn btn-primary" ng-click="cancelAlert(alert)" data-dismiss="modal"> Cancel </button>
CONTROLLER
$scope.onacknowledgedClick = function(alert){
alert.acknowledgeInProgress = true;
}
$scope.saveAlert = function(alert) {
/*$scope.alert.acknowledged = true;*/
alert.disableCheckbox = true;
alert.acknowledgeInProgress = true;
var alertUrl = $incidentsUrl+"/"+alert.alertForIncident.incidentID+"/alerts/"+alert.alertID;
$http.put(alertUrl, alert).then(function(result) {
alert.acknowledgeInProgress = false;
});
}

HTML Beginform in modal in foreach loop

I have a foreach loop that runs trough all my appointments. All of these appointments have to receive a rating which I would like the user to fill in inside a bootstrap modal.
I've tried passing the id to the HTTPPost method without the modal which went perfectly.
I have a feeling the data-toggle attribute is ruining it.
I know this sort of code isn't ideal but i would like the user to fill in a review without redirecting them to another page.
Is there somebody who knows how to make sure the id passed to the HTTPPost method is the correct one? Right now I always get the ID of the first appointment in the list.
Any help is more than welcome.
<tbody>
#foreach (Appointment a in Model.Appointments)
{
if (DateTime.Now > a.endingDate && Model.Account.idBabysitters.Equals(null))
{
<tr>
<td data-name="Van" class="text-center"><p>#a.startingDate</p></td>
<td data-name="Tot" class="text-center"><p>#a.endingDate</p></td>
<td data-name="Prijs" class="text-center"><p>#a.fee</p></td>
<td><button type="button" class="btn btn-primary btnReview" data-toggle="modal" data-target=".myModal">✩ Geef punten</button></td>
<td class="modalTD">
<div class="container">
#using (Html.BeginForm("Score", "Appointment", new { #id = a.idAppointments, enctype = "multipart/form-data" }, FormMethod.Post))
{
<div class="modal fade myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close btnCloseModal" data-dismiss="modal">×</button>
<h4 class="modal-title">Schrijf Recensie</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<input type="submit" value="Klaar!" class="btn btn-default btnCloseModal">
</div>
</div>
</div>
</div>
}
</div>
</td>
</tr>
}
}
</tbody>
Your btn for modal
<button type="button" class="btn btn-primary btnReview" data-toggle="modal" data-target="#(String.Format("{0} {1}", .myModal, a.idAppointments))">✩ Geef punten</button>
You Modal
<div class="#String.Format("{0} {1} {2} {3}, modal, fade, myModal, a.idAppointments")" role="dialog">
Idea is to have a different modal class name for each of your appointments item. As for now your button is always getting the first modal it can find thus you are getting the same id in the post method.