Discussion :

[llaumegui]

Bonjour je suis nouveau sur le Framework Angular et j'essaye de faire une application avec une page de connexion.

Le problème est que je veux faire une fonction à l'envoi du formulaire "onSubmitForm()" qui vérifie si le login et le mot de passe sont égales aux variables login et password dans mon login.component.ts mais les id des champs des formulaires (des input) ne sont pas reconnus dans login.component.ts

Le formulaire de connexion (login.component.html) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <h1>Connexion</h1>
<form name="LoginForm" (ngSubmit)="onSubmitForm()">
    <label for="loginInput">Renseigner votre Login : </label>
    <input type="text" id="loginInput" placeholder="Username"> <br/>
    <label for="passwordInput">Renseigner votre mot de passe : </label>
    <input type="password" id="passwordInput" placeholder="Password"> <br/>
    <button type="submit">Se connecter</button>
</form>

La page login.component.ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 import { Component, OnInit } from '@angular/core';
 
 
 
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit{
  login!: string;
  password!: string
 
  ngOnInit(){
    this.login = "LeLogin";
    this.password = "LeMotdePasse";
 
  }
  onSubmitForm() {
    if(loginInput === this.login && passwordInput === this.password)
    {
 
    }
  }
 
}

Voilà si quelqu'un sait comment résoudre ce petit problème. PS : lognInput et passwordInput sont les id des champs du formulaire

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {Component} from '@angular/core';
 
@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>
 
    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>
 
    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';
 
  setValue() {
    this.name = 'Nancy';
  }
}

pour utiliser ngModel faut importer @angular/forms dans le module !