When I try to update an entry i don't have any errors but nothing happens
I dont have much idea of angular, i am sorry.
This is my html
<div class="modal-body">
Id del Envío: <input type="text" placeholder="Id del envío" id="idE" class="form-control" value="{{envioactual.idEnvio}}" disabled> <br>
Nombre del Destinatario: <input type="text" placeholder="Nombre Cliente" id="inombreDestinatario" class="form-control" value="{{envioactual.nombreDestinatario}}"> <br>
Dirección de Entrega <input type="text" placeholder="Dirección Completa" id="idireccionCompleta" class="form-control" value="{{envioactual.direccionCompleta}}"> <br>
DNI del receptor <input type="text" placeholder="DNI del receptor" id="iDNI" class="form-control" value="{{envioactual.dninif}}"> <br>
Código Postal <input type="text" placeholder="Código Postal" id="icodigoPostal" class="form-control" value="{{envioactual.codigoPostal}}"> <br>
Número de intentos de entrega <input type="text" placeholder="Número de intentos de entrega" id="inumIntentosEntrega" class="form-control" value="{{envioactual.numIntentosEntrega}}"> <br>
Estado del envío <input type="text" placeholder="Estado del envío" id="iidEstadoEnvio" class="form-control" value="{{envioactual.idEstadoEnvio}}"> <br>
Id Del Cliente<input id="prodId" id="clienteId" class="form-control" value="{{envioactual.idCliente}}" disabled> <br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="actualizarEnvio()">Actualizar</button>
This my 'envios' component
envioactual : Envio;
actualizarEnvio()
{
let idEnvio = parseInt((document.getElementById('idE') as HTMLInputElement).value);
let nombreDestinatario = (document.getElementById('inombreDestinatario') as HTMLInputElement).value;
let direccionCompleta = (document.getElementById('idireccionCompleta') as HTMLInputElement).value;
let codigoPostal = (document.getElementById('icodigoPostal') as HTMLInputElement).value;
let numIntentosEntrega = parseInt((document.getElementById('inumIntentosEntrega') as HTMLInputElement).value);
let idEstadoEnvio = (document.getElementById('iidEstadoEnvio') as HTMLInputElement).value;
let dninif = (document.getElementById('iDNI') as HTMLInputElement).value;
let idCliente = (document.getElementById('idCliente') as HTMLInputElement).value;
const contenido =
{
idEnvio, nombreDestinatario, direccionCompleta, codigoPostal, numIntentosEntrega, dninif, idEstadoEnvio, idCliente
}
console.table(contenido)
this.conexion.actualizarEnvio(contenido).subscribe(xx => this.envioactual = xx);
}
}
This my conexion service
actualizarEnvio(conexion : Envio)
{
const path = `${this.api}/actualizarEnvio/${conexion.idEnvio}`;
return this.http.put<Envio>(path, conexion);
}
This is the interface
export interface Envio
{
idEnvio : number;
nombreDestinatario: string;
dninif: string;
codigoPostal: string;
direccionCompleta:string;
idEstadoEnvio: string;
numIntentosEntrega: number;
idCliente: string;
}
And the relationship on database
[1]: https://i.stack.imgur.com/CodiV.png
Related
I'm trying to access and use the data from my service and having some issues. I am able to see the data returned just fine in the console from my console.log(data); from the method below:
public getCustomerData() {
this.Service.getCustomers().subscribe((data) => {
console.log(data);
this.customers = data.value;
console.log(this.customers);
var i:number;
for(i = 0; i < this.customers.length; i++ ){
if(this.customers[i].CityName == null || this.customers[i].StateName == null || this.customers[i].ZipCode == null || this.customers[i].Address1 == null){
this.customers[i].Address1 = "";
this.customers[i].CityName = "San Diego";
this.customers[i].StateName = "California";
this.customers[i].ZipCode = "12345";
}
}
})
}
Where I am running into issues is the next line this.customers = data.value;, I am recieving the error Property 'value' does not exist on type 'Customer[]'.
Here is how my data is returned:
Service method:
public getCustomers()
{
let url = "https://rss-staging.carefusion.com/api/odata/Facilities";
const params = new HttpHeaders()
.set('X-Atlas-SecurityKey', '75162FD1-A4E8-40AB-A62A-823932CEAD1F')
return this.http.get<Customer[]>(url, {headers: params})
}
HTML Table:
<div class="row pb-2">
<div class="col-lg-4">
<div class="form-group">
<label for="input1">Name</label>
<input type="text" placeholder="Customer Name" class="form-control" id="input1"
aria-describedby="Text field" name="name" [(ngModel)]="fields.Name"
(ngModelChange)="updateFilters()" />
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label for="input1">Address</label>
<input type="text" placeholder="Customer Address" class="form-control" id="input1"
aria-describedby="Text field" name="address" [(ngModel)]="fields.Address1"
(ngModelChange)="updateFilters()" />
</div>
</div>
</div>
<div class="row pb-2">
<div class="col-lg-3">
<div class="form-group">
<label for="input1">City</label>
<input type="text" placeholder="City" class="form-control" id="input1" aria-describedby="Text field"
name="city" [(ngModel)]="fields.CityName" (ngModelChange)="updateFilters()" />
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="input1">State</label>
<input type="text" placeholder="State" class="form-control" id="input1" aria-describedby="Text field"
name="name" [(ngModel)]="fields.StateName" (ngModelChange)="updateFilters()" />
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="input1">Zip Code</label>
<input type="text" placeholder="123456" class="form-control" id="input1" aria-describedby="Text field"
name="name" [(ngModel)]="fields.ZipCode" (ngModelChange)="updateFilters()" />
</div>
</div>
</div>
How can I fix this?
From the code, I can see that you have typecasted the result of the function getCustomers() to customers[]
return this.http.get<Customer[]>(url, {headers: params})
Basically you are returning an array of customers from the http call.
To return correct value, pipe the results and map
import { map } from 'rxjs/operators'
return this.http.get<any>(url, {headers: params}).pipe(
map(data => data.value as Customer[])
)
Your method getCustomers() from the service already return a list of customers, and a list doesn't have a property called value.
You only have to do this, and should works.
this.customers = data;
I am unable to insert de data into mysql using angular. If i want to fetch data in mysql it works ok, but this doesn't work.
I can't see the error. Can you help me?
this is my html form:
<form #suscribir="ngForm">
<div class="modal-body bodycolabora">
<label class="labelmodal">Recibe nuestros correos para estar al tanto de los últimos post y recursos subidos.</label>
<div class="md-form mb-2">
<label class="labelmodal">Tu nombre*</label>
<input class="form-control" type="text" name="nombre" class="input" placeholder="Tu nombre" [(ngModel)]="datos.nombre" required minlength="3" #nameInput="ngModel">
</div>
<div *ngIf="nameInput.invalid && (nameInput.dirty || nameInput.touched)"
class="alert alert-danger">
<div *ngIf="nameInput.errors.required">
Escribe tu nombre.
</div>
<div *ngIf="nameInput.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
<div class="md-form mb-2">
<label class="labelmodal">Email*</label>
<input class="form-control" type="email" name="email" class="input" placeholder="Tu email" [(ngModel)]="datos.email" required email #emailInput="ngModel">
</div>
<div *ngIf="emailInput.invalid && (emailInput.dirty || emailInput.touched)"
class="alert alert-danger">
<div *ngIf="emailInput.errors.required">
Escribe tu email.
</div>
</div>
<!--Privacidad-->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="aceptopolitica" name="privacidad" value="acepto" ngModel required #privacidadInput="ngModel">
<label class="labelmodal" class="form-check-label" for="infantil" name="etapa" >Acepto la Política de privacidad</label>
</div>
<div *ngIf="privacidadInput.invalid && (privacidadInput.dirty || privacidadInput.touched)"
class="alert alert-danger">
<div *ngIf="privacidadInput.errors.required">
Acepta la política de privacidad
</div>
</div>
</div>
<div class="modal-footer footercolabora d-flex justify-content-center">
<button (click)="suscriptores()" value="Nuevo suscriptor" type="submit" name="submit" id="submit" class="btn btncolabora" [disabled]="suscribir.invalid">Enviar →</button>
</div>
</form>
In my component.ts i have:
datos={
nombre:null,
email:null
}
constructor(private articulosServicio: ServicioService) {
}
suscriptores() {
this.articulosServicio.suscriptores(this.datos).subscribe(datos => {
if (datos['resultado']=='OK') {
alert(datos['mensaje']);
}
});
In the service.ts:
url='http://xxxxxxxxxxx/'; //
constructor(private http: HttpClient) { }
suscriptores(datos) {
return this.http.post(`${this.url}suscriptores.php`, JSON.stringify(datos));
}
and finally the file.php,
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Content-Type: application/json');
$json = file_get_contents('php://input');
$params = json_decode($json);
require("conexion.php");
$con=retornarConexion();
$email = mysqli_real_escape_string($con, $params->email);
$nombre = mysqli_real_escape_string($con, $params->nombre);
$query= 'INSERT INTO newsletter(email, nombre) VALUES ("' . $email . '","'. $nombre .'")';
if(mysqli_query($con, $query))
{
class Result {}
$response = new Result();
$response->resultado = 'OK';
$response->mensaje = 'datos grabados';
}
else
{
class Result {}
$response = new Result();
$response->resultado = 'OK';
$response->mensaje = 'datos grabados';
}
header('Content-Type: application/json');
echo json_encode($response);
?>
Sorry for all the code but i think you might need id to see the error
I am creating a custom sign up form and this is the view I created:
def signup(request):
if request.user.is_authenticated:
return render(request, 'listings/index.html', {})
if request.method == 'POST':
if 'cr-1' in request.POST:
newuser = User.objects.create_user(username=request.POST.get('email'), email=request.POST.get('email'), password=request.POST.get('password'))
newpatient = Patient.objects.create(user=newuser)
user = authenticate(request, username=username, password=password)
if user is not None:
auth_login(request, user)
return redirect('dashboard')
elif 'cr-2' in request.POST:
newuser = User.objects.create_user(username=request.POST.get('email'), email=request.POST.get('email'), password=request.POST.get('password'))
newdoctor = Doctor.objects.create(user=newuser)
user = authenticate(request, username=username, password=password)
if user is not None:
auth_login(request, user)
return redirect('dashboard')
else:
print("##################### NOTHING HAPPENED #####################")
return render(request, 'dashboard/signup.html', {})
I purposely added an else statement printing NOTHING HAPPENED on the console because nothing happens when I click on submit.
Here is the template:
<form class="form-type-material" method="POST" action="{% url 'signup' %}">
{% csrf_token %}
<div class="custom-control custom-radio">
<input type="radio" id="cr-1" name="rg-1" class="custom-control-input" checked>
<label class="custom-control-label" for="cr-1">Patient/Visiteur</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="cr-2" name="rg-1" class="custom-control-input">
<label class="custom-control-label" for="cr-2">Médecin/Praticien</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="id_email" name="email" required>
<label for="email">Adresse email</label>
</div>
<div class="form-group">
<input type="password" class="form-control" id="id_password" name="password" required>
<label for="password">Mot de passe</label>
</div>
<div class="form-group">
<input type="password" class="form-control" id="id_password-conf" name="password-conf" required>
<label for="password-conf">Confirmation du mot de passe</label>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" required>
<label class="custom-control-label">I agree to all <a class="text-primary" href="#">terms</a></label>
</div>
</div>
<br>
<button class="btn btn-bold btn-block btn-primary" type="submit">Créer et accéder au tableau de bord</button>
</form>
What seems to be the issue?
PS: In a previous attempt I did if 'cr-1'.checked in request.POST because I saw it in another stackoverflow thread but it gave me the error: str .... has no checked method.
Here in your template you have 'cr-1' and 'cr-2' as ids, but while submitting the form the name will be sent. i.e here you have name name="rg-1"
So, you need to check
if 'rg-1' in request.POST:
I've been working with reactive form like I show in the link
https://plnkr.co/edit/ApCn3YicMjfm2vhSOudj?p=preview
this is my form
<div *ngFor="let item of data; let index = index">
<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
<label>
<span>Full name</span>
<input type="text" placeholder="Name" formControlName="name">
</label>
<div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')">
Name is required
</div>
<div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')">
Minimum of 2 characters
</div>
<div formGroupName="account">
<label>
<span>Email address</span>
<input type="email" placeholder="Email" formControlName="email">
</label>
<div class="error" *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">
Email is required
</div>
<label>
<span>Confirm address</span>
<input type="email" placeholder="Address" formControlName="confirm">
</label>
<div class="error" *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched">
Confirming email is required
</div>
</div>
<button type="submit" [disabled]="user.invalid">Sign up</button>
</form>
</div>
but my problem is that I have an ngFor, every time I submit the form it push the data to array.
How can I do if I want for example submit my first array and push the data to position 0 of my data array, if I submit my second form, it will push the data to position 1
But my second form should be empty
maybe you wanna using form array like this:
#Component({
selector: 'signup-form',
template: `
<form novalidate (ngSubmit)="onSubmit()" [formGroup]="users">
<div formArrayName="data">
<ng-container *ngFor="let user of fData.controls; index as i">
<div [formGroupName]="i">
<label>
<span>Full name</span>
<input type="text" placeholder="Name" formControlName="name">
</label>
<div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')">
Name is required
</div>
<div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')">
Minimum of 2 characters
</div>
<div formGroupName="account">
<label>
<span>Email address</span>
<input type="email" placeholder="Email" formControlName="email">
</label>
<div
class="error"
*ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">
Email is required
</div>
<label>
<span>Confirm address</span>
<input type="email" placeholder="Address" formControlName="confirm">
</label>
<div
class="error"
*ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched">
Confirming email is required
</div>
</div>
<button type="submit" [disabled]="user.invalid">Sign up</button>
</div>
</ng-container>
</div>
</form>
`
})
export class SignupFormComponent implements OnInit {
user: FormGroup;
users: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.user = this.buildGroup();
this.users = this.fb.group({
data: this.fb.array([this.user])
});
}
get fData() {
return this.users.get('data') as FormArray;
}
buildGroup() {
return this.fb.group({
name: ['', [Validators.required, Validators.minLength(2)]],
account: this.fb.group({
email: ['', Validators.required],
confirm: ['', Validators.required]
})
});
}
onSubmit() {
this.fData.push(this.buildGroup());
const {valid, value} = this.fData;
console.log(valid, value);
}
}
basically, we're using FormArray to handle array of data, then loop through it.
in template, each time you loop through array item, Angular will store current AbstractControl in index variable (in above is i).
you can see form in action here: https://plnkr.co/edit/E5Qzm85LksSCZAloXZz5?p=preview
The API document here: https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html
you can use at, removeAt, etc to access or delete at specific index.
I've got a site with a form.
The value of the input should be a specific value. This works:
$('button').on('click', function () {
var val1 = $("#teller").val();
var val2 = $("#noemer").val();
if (val1 == 3 && val2 == 10)
alert("Goed gedaan! je hebt de vraag goed beantwoord. Je kunt verder met je avontuur!");
else
alert("Helaas... Dit is niet het goede antwoord. Probeer het nog eens!");
});
But when I submit the page will refresh, change my url and refresh the page so the page starts at the beginning again... This is the site: http://stilld.nl/brrreuk/
I don't want this to happen. I want the code to check if the value's given are correct, but then I want the site to stay where it is.
Hope you can help.
this is the html:
<form id="form_1">
<fieldset>
<p>
<input type="text" class="input_required" id="teller" name="teller" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="teller"></label>
</p>
<hr noshade size=3>
<p>
<input type="text" class="input_required" id="noemer" name="noemer" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="noemer"></label>
</p>
<p>
<button class="submit" type="submit" value="controleer">Controleer</button>
</p>
</fieldset>
</form>
Here you go. Simply change the submit to a button.
The JavaScript:
$('button').on('click', function(){
var val1 = $("#teller").val();
var val2 = $("#noemer").val();
if(val1 == 3 && val2 == 10)
alert("Goed gedaan! je hebt de vraag goed beantwoord. Je kunt verder met je avontuur!");
else
alert("Helaas... Dit is niet het goede antwoord. Probeer het nog eens!");
});
And the HTML
<p>
<input type="text" class="input_required" id="teller" name="teller" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="teller"> </label>
</p>
<hr noshade size=3>
<p>
<input type="text" class="input_required" id="noemer" name="noemer" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="noemer"> </label>
</p>
<p>
<button type="button" value="controleer"> Controleer </button>
</p>
List to the form's submit event instead of the button's click event:
$('form').on('submit', function(e) {
e.preventDefault();
// do stuff
// $(this).trigger('submit') if everything's ok
});
NOTE: The e.preventDefault(); line is important!