Estoy usando el siguiente código para errores de validación, pero no se ve ningún mensaje de error. Alguien puede ayudar. He configurado los validadores en el componente usando el generador de formularios.
Cuando estoy usando solo un formulario, el grupo funciona, pero no con los grupos de formularios de nido.
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ReactiveFormsModule, FormsModule, FormGroup, FormBuilder, Validators} from "@angular/forms";
@Component({
selector: 'my-app',
template: `
<div class="login">
<form [formGroup]="registerForm" (ngSubmit)="dologin(form.value)">
<div class="form-group" formGroupName="user" id ="user">
<div class="form-group">
<label for="username">Username</label>
<input id="username" type="text" class="form-control" name="username" formControlName="username">
<div [hidden]="registerForm.controls['username'].valid || registerForm.controls['username'].pristine"
class="alert alert-danger"> Username is required.</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" type="password" class="form-control" name="password" [formControl]="registerForm.controls['password']">
<div [hidden]="registerForm.controls['password'].valid || registerForm.controls['password'].pristine"
class="alert alert-danger"> Password is required.</div>
</div>
<button type="button" (click)="logOut([registerForm])">Check vals</button>
<button type="submit" [disabled]="!registerForm.valid" class="btn btn-primary">Login</button>
</form>
</div>
`,
providers: [FormBuilder]
})
export class App {
name:string;
form: FormGroup;
constructor(private fb: FormBuilder) {
this.name = 'Angular2'
this.registerForm=this.fb.group({
user:this.fb.group({
username:['',Validators.required]
}),
password:['',Validators.required]
});
}
logOut(x: any) {
for(var i = 0; i < x.length; ++i) {
console.log(x[i]);
}
}
dologin(stuff: any) {
console.log(stuff);
}
}
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
por favor intente seguir los cambios
<div *ngIf="registerForm.get('user.username').hasError('required') && registerForm.get('user.username').touched"
class="alert alert-danger"> Username is required.</div>
y para mostrar el error de contraseña
<div *ngIf="registerForm.get('password').hasError('required') && registerForm.get('password').touched"
class="alert alert-danger"> Password is required.</div>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras