The problem here is that there is no binding between HTML and TS files. The value is not updated. I did follow a tutorial and I followed the steps but it does not work at all.
<form [formGroup]="form" (ngSubmit)="login()">
<input (keyup)="log()" formControlName="kk">
</form>
export class LoginComponent implements OnInit {
// form = new FormGroup({
// kk: new FormControl(''),
// // account: new FormGroup({
// // username: new FormControl('', [
// // Validators.required,
// // Validators.minLength(3),
// // UsernameValidators.cannotContainSpace,
// // ], UsernameValidators.shouldBeUnique),
// // password: new FormControl('', Validators.required)
// // })
// });
form = new FormGroup({
kk: new FormControl(''),
});
get kk(): AbstractControl {
return this.form.get('kk');
}
log(): void {
console.log(this.form.value);
}
login(): void {
console.log('login');
}
ngOnInit() {
this.log();
}
}
This code keeps returning {kk: ""} instead of updating its value. What's wrong in my code?
Paul,
Here's an example I am using with Ionic V5: .ts is like
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DateTime } from 'luxon';
@Component({
selector: 'app-register2',
templateUrl: './register2.page.html',
styleUrls: ['./register2.page.scss'],
})
export class Register2Page implements OnInit {
signUpForm: FormGroup;
mismatch: boolean
ageIsValid: boolean
constructor(private firebaseServ: FirebaseServiceService, public formBuilder: FormBuilder) {
this.signUpForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required,Validators.minLength(6)]],
confirmPassword: ['', Validators.required],
nom: ['', Validators.required],
prenom: ['', Validators.required],
pseudo: ['', Validators.required],
naissance: ['', Validators.required]
}, { validators: [this.passwordMatchValidator, this.ageValidator] });
this.signUpForm.valueChanges.subscribe(obs => {
this.mismatch = this.signUpForm.getError('mismatch')
this.ageIsValid = this.signUpForm.getError('ageVerification')
})
}
ngOnInit() {
}
passwordMatchValidator(g: FormGroup) {
return g.get('password').value === g.get('confirmPassword').value ? null : { 'mismatch': true };
}
ageValidator(g: FormGroup) {
let naissance = DateTime.fromISO(g.get('naissance').value)
console.log(naissance.diffNow(['days', 'months', 'years']).as('years'))
return naissance.diffNow(['days', 'months', 'years']).as('years') <= -18 ? null : { 'ageVerification': true };
}
signUp() {
console(this.signUpForm.value)
}
}
.html is:
<ion-header>
<ion-toolbar>
<ion-title>Enregistrez-vous pour accéder au site !</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form [formGroup]="signUpForm" (ngSubmit)="signUp()">
<ion-list>
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input type="email" formControlName="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Mot de Passe</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Confirmer le mot de Passe</ion-label>
<ion-input type="password" formControlName="confirmPassword"></ion-input>
</ion-item>
<ion-label color=danger *ngIf="(mismatch==true) && (signUpForm.get('confirmPassword').dirty)">
Le mot de passe et sa confirmation doivent coïncider.
</ion-label>
<ion-item>
<ion-label position="floating">Nom</ion-label>
<ion-input type="text" formControlName="nom"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Prénom</ion-label>
<ion-input type="text" formControlName="prenom"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Pseudo</ion-label>
<ion-input type="text" formControlName="pseudo"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Date de naissance</ion-label>
<ion-datetime display-format="DD MM YYYY" picker-format="DD MM YYYY" formControlName="naissance"></ion-datetime>
<ion-label color=danger *ngIf="(ageIsValid==true) && (signUpForm.get('naissance').dirty)">
Vous devez être majeur pour ouvrir un compte. Si vous êtes mineur, demandez à vos parents d'en ouvrir un pour
vous.
</ion-label>
</ion-item>
</ion-list>
<ion-button expand="full" fill="outline" type="submit" [disabled]="!signUpForm.valid">connexion</ion-button>
</form>
</ion-content>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.