tengo un componente.ts que se parece a esto:
import { Component, OnInit } from '@angular/core'; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {Observable, Subscription} from "rxjs"; import {ArticleService} from "../article.service"; @Component({ selector: 'app-article-new', templateUrl: './article-new.component.html', styleUrls: ['./article-new.component.css'] }) export class ArticleNewComponent implements OnInit { response$?: Subscription; constructor(private formBuilder: FormBuilder, private articleService: ArticleService) { } articleForm: FormGroup = this.formBuilder.group({ title: ['', Validators.required], content: ['', [Validators.required, Validators.minLength(69)]] }) ngOnInit(): void { } async submit(){ console.log('article / sub', this.articleForm.value); this.response$ = await this.articleService.createArticle(this.articleForm.value).subscribe( res => console.log(res) ); } get title() { return this.articleForm.get('title'); } get content() { return this.articleForm.get('content'); } }Y el html del componente:
<h3>Create New Article</h3> <form [formGroup]="articleForm" (ngSubmit)="submit()"> <div class="form-group"> <label for="title">Title :</label> <input type="text" formControlName="title" class="form-control" id="title" required> <div *ngIf="title?.invalid" class="alert alert-danger"> Title is required </div> </div> <div class="form-group"> <label for="content">Content :</label> <textarea class="form-control" formControlName="content" id="content" rows="3" required></textarea> <div *ngIf="content?.errors && (content?.errors['required'] !== null)" class="alert alert-danger"> Content is required </div> <div *ngIf="content?.errors && (content?.errors['minLength'] !== null)" class="alert alert-danger"> Minimum length </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>Como puede ver, tengo 3 divs con * ngIf . El primero con "Título" me dio un error similar que resolví agregando "?" después del nombre de la variable.
Pero con la variable de contenido, agregar el signo de interrogación no cambió nada. Entonces tengo ese error para esos 2 divs:
TS2533: el objeto es posiblemente 'nulo' o 'indefinido'.
Sí, esto es una verificación estricta y tener rutas "largas" como (content?.errors['required'] !== null causará tales cosas. Debería aclararse usando
content?.errors?.required pero prefiero usar hasError en su lugar, así que eso es lo que le sugiero que use, una mejor legibilidad en mi opinión;) Entonces eso significaría simplemente
content?.hasError('required') y eso se puede aplicar a cada control de formulario en su formulario, cualquier validador. Tenga en cuenta que hay un minLenght gotcha maxLength . La L debe estar en minúsculas, así que:
content?.hasError('minlength')Intenta usar esto:
articleForm= new FormGroup({ title: new FormControl('', Validators.required), content: new FormControl('', [Validators.required, Validators.minLength(69)]) });Consulte esta documentación: https://www.concretepage.com/angular-2/angular-2-formgroup-example
Mueva la lógica de creación de formularios dentro del gancho ngOnInit
ngOnInit(): void { this.buildForm(); } buildForm():void{ this.articleForm = this.formBuilder.group({ title: ['', Validators.required], content: ['', [Validators.required, Validators.minLength(69)]] }) }y agregue verificar en la parte html para el formulario de artículo
<form *ngIf="articleForm" [formGroup]="articleForm" (ngSubmit)="submit()">