Errores de validación que no se muestran con formularios controlados por modelos en Angular 4

Kirandeep Kaur

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 {}
Jasnan

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

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Angular2: cómo ver datos de formularios controlados por modelos con console.log

Angular2: cómo ver datos de formularios controlados por modelos con console.log

Django allauth: los errores de validación de formularios personalizados no se muestran en la plantilla

Enlace de datos bidireccional en formularios controlados por modelos

¿Formularios controlados por datos, botón de radio de bucle con valor predeterminado que no funciona con la validación?

Angular2: formularios controlados por modelos que utilizan saltos de estilo válidos para ng CSS

Errores de validación de API que no se muestran en Laravel

Los errores de validación de Laravel no se muestran, mientras que sí se muestran en el error 422

Los errores de validación de forma reactiva no se muestran en Angular 5

Validación de formularios en Angular 4

Validación de formularios en Angular 4

Cómo evitar que los errores de validación de formularios se eliminen del DOM con Parsleyjs

Cómo evitar que los errores de validación de formularios se eliminen del DOM con Parsleyjs

Validación de formularios: ¿cómo obtener la longitud real de un campo que se muestra en errores?

Appscript manejó errores que no se muestran en errores de stackdriver

Acerca del concepto de ngForm y ngModel en formularios controlados por plantillas en angular

Acerca del concepto de ngForm y ngModel en formularios controlados por plantillas en angular

Errores de validación de formularios en línea que no están en la plantilla

No se muestran errores de validación en la página de inicio de sesión

Uso de controles con formularios angulares controlados por plantillas

Los errores de validación no se muestran en forma de varias partes en los rieles

Los errores de validación de Laravel se muestran en el evento de éxito de Ajax

Laravel ¿Cómo vuelvo con los errores de SQL que se muestran en HTML?

Dos vistas parciales con datos de diferentes modelos pero que se muestran en una misma vista

Los errores de validación solo se muestran cuando no hay middleware web en Laravel

Los errores de validación solo se muestran cuando no hay middleware web en Laravel

Los errores de validación de Codeigniter no se muestran

CakePHP: los errores de validación se muestran dos veces

CakePHP: los errores de validación se muestran dos veces

TOP Lista

  1. 1

    ¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)

  2. 2

    OAuth 2.0 utilizando Spring Security + WSO2 Identity Server

  3. 3

    Manera correcta de agregar referencias al proyecto C # de modo que sean compatibles con el control de versiones

  4. 4

    Ver todos los comentarios en un video de YouTube

  5. 5

    uitableview delete button image in iOS

  6. 6

    ¿Título del selector de SwiftUI?

  7. 7

    Swift / Firebase : Facebook 사용자가 계정을 만들 때 Firebase 데이터베이스에 제대로 저장하려면 어떻게해야합니까?

  8. 8

    ¿Es posible reemplazar los valores de un archivo config.properties a través de TFS?

  9. 9

    Representación de mapas 3D en juegos

  10. 10

    Golang ListenAndServeTLS devuelve datos cuando no se usa https en el navegador

  11. 11

    Declarar propiedades reactivas (agregar bloques de componentes dinámicamente desde la inserción de matriz)

  12. 12

    Cómo hacer que SwiftUI Text multilineTextAlignment comience desde arriba y centro

  13. 13

    Cómo depurar una aplicación React en Visual Studio 2019 usando la plantilla "Blank Node.js"

  14. 14

    Múltiples relaciones en la misma tabla con dos columnas Laravel

  15. 15

    No existe tal archivo o directorio cuando se inicia el nombre del directorio con /

  16. 16

    Verilog : 입력 신호를 한 클럭 주기로 지연시키는 방법은 무엇입니까?

  17. 17

    ¿Cómo hacer un generador de ruido Perlin más suave?

  18. 18

    Problème avec le dessin d'un élément Qml avec des appels OpenGL bruts

  19. 19

    El nombre 'HttpContext' no existe en el contexto actual en Razor

  20. 20

    WPF pleine largeur DataGridColumn sur la largeur de DataGrid

  21. 21

    Tengo algunos problemas con el syscall de golang cuando llamo a dll en win7-64

CalienteEtiquetas

Archivo