Currently, I am using a modal form that loads information about my items when it is open. However, when I try to submit, all inputs are null except when the modal displays which works fine.
<div id="modal1" class="modal">
<form #formData='ngForm' (ngSubmit)="onSubmit(formData)">
<div class="modal-content">
<div class="row">
<div class="input-field col s6">
<input (ngModel)="productN" value="{{ObjProd.product}}" name="productN" type="text" >
<label for="productN">Product Name</label>
</div>
<div class="input-field col s6">
<input (ngModel)="price" value="{{ObjProd.price}}" name="price" type="text" >
<label for="price">price</label>
</div>
<div class="input-field col s6">
<input (ngModel)="quantity" value="{{ObjProd.quantity}}" name="quantity" type="text" >
<label for="quantity">quantity</label>
</div>
<div class="input-field col s6">
<input (ngModel)="photoURL" value="{{ObjProd.product}}" name="photoURL" type="text" >
<label for="photoURL">photoURL</label>
</div>
<input type="text" placeholder="Full name" value="{{ObjProd.key}}" (ngModel)="namef" name="namef" class="txt" >
<input type="text" (ngModel)="keyProduct" name="keyProduct" value="{{ObjProd.key}}" >
<input type="text" (ngModel)="typeProduct" name="typeProduct" value="{{ObjProd.type}}" >
</div>
</div>
<div class="modal-footer">
<button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat " >Update Product</button>
</div>
</form>
</div>
Upon submission, the function will check if there is a type of product specified and log the photo URL. Otherwise, it will log both the name and photo URL.
onSubmit(formData) {
if(formData.value.typeProduct){
console.log(formData.value.photoURL);
}else{
console.log(formData.value.namef, formData.value.photoURL);
}
}
The modal works correctly displaying data, but there seems to be an issue with the output. Check this link for more details.