Estos son mis archivos. Me sale este error alguien me puede ayudar.
Error: src/app/app.component.html:5:123 - error TS4111: Property 'fName' comes from an index signature, so it must be accessed with ['fName']. <input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f.fName.errors}"/>componente.html
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()"> <div> <lable>Name:</lable> <input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f.fName.errors}"/> <div *ngIf="submitted && f.fName.errors" class="form-control">first name is required</div> </div> </form>componente.ts
import { Component, OnInit } from '@angular/core'; import { FormControl, FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ surveyForm!: FormGroup; submitted= false; constructor(private formBuilder: FormBuilder){} ngOnInit(){ this.surveyForm = this.formBuilder.group({ fName: ['',Validators.required] }); } //name = new FormControl(''); get f() { return this.surveyForm.controls; } onSubmit() { this.submitted = true; // stop here if form is invalid if (this.surveyForm.invalid) { return; } // display form values on success alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.surveyForm.value, null, 4)); } onReset() { this.submitted = false; this.surveyForm.reset(); }}módulo.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; //import { FormBuilder } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, //FormBuilder ], //declarations: [AppComponent], providers: [ //FormBuilder ], bootstrap: [AppComponent] }) export class AppModule { }Validación de formulario Angular 13 con ejemplo de formularios reactivos
agregue form() getter para acceder fácilmente a los campos de formulario en el archivo * .component.ts
//convenience getter for easy access to form fields get form(): { [key: string]: AbstractControl; } { return this.signInForm.controls; }Ejemplo de errores de campo de acceso a correo electrónico
form['email'].errors form['email'].errors['required'] form['email'].errors['email']ejemplo de HTML signInForm
<form [formGroup]="signInForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="email">Email</label> <input type="email" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && form['email'].errors }" /> <div *ngIf="submitted && form['email'].errors" class="invalid-feedback"> <div *ngIf="form['email'].errors['required']"> Field is required </div> <div *ngIf="form['email'].errors['email']"> Email format is invalid </div> </div> </div> <div class="form-group mt-3"> <label for="password">Password</label> <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && form['password'].errors }" /> <div *ngIf="submitted && form['password'].errors" class="invalid-feedback"> <div *ngIf="form['password'].errors['required']"> Password is required </div> </div> </div> <div class="mt-3 d-flex justify-content-between"> <button type="submit" [disabled]="isLoading" mat-flat-button color="primary"> <span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span> Sign in </button> </div> </form>Angular 13 Form Validation con Reactive Forms y Form Builder, encontré la solución en Angular document, tienen algunas diferencias con Angular 12, puedes probar esto:
<div *ngIf="submitted && surveyForm.get('fName')?.valid" class="form-control">first name is required</div>vamos a aclarar cuál es el problema. Estamos hablando de una validación de formulario basada en plantillas. Necesita validar algo, digamos para asegurarse de que se requiere un campo (llámelo firstName). Tenga en cuenta que desde Angular v13 , cambió un poco de un código antiguo como este:
<div *ngIf="firstName.errors?.required">First Name is required</div>a esto
<div *ngIf="firstName.errors?.['required']">First Name is required</div>Como recordatorio, el '?' es asegurarse de que el objeto de errores no sea nulo.
Más detalles están aquí: https://angular.io/guide/form-validation
Respuesta:
<span *ngIf="username?.errors?.['required']">Name is required</span> <span *ngIf="username?.errors?.['minlength']"> Name must be 3 charchters</span> Aquí está la respuesta a la pregunta Error: src/app/reactive-signup/reactive-signup.component.html:16:52 - error TS4111: Property 'required' comes from an index signature, so it must be accessed with ['required'].
<span *ngIf="username?.errors.required"> Name is required </span>En mi opinión, esta es una característica completamente innecesaria en TypeScript . Para deshabilitarlo, debe cambiar el archivo tsconfig.json :
"compilerOptions": { // ... "noPropertyAccessFromIndexSignature": false, // ... }