DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Mvlhomme
Mvlhomme

Posted on

Property 'name' comes from an index signature, so it must be accessed with ['name'].

categories-form.component.html

<div class="admin-page">
    <p-card header="Ajouter CatΓ©gories" subheader="Ajouter ou Modifier les catΓ©gories ici">
        <div class="p-grid" [ngStyle]="{ 'margin-bottom': '25px' }">
            <div class="col-12">
                <p-toolbar>
                    <div class="p-toolbar-group-left"></div>
                    <div class="p-toolbar-group-right">
                        <p-button styleClass="p-button-primary" [ngStyle]="{ 'margin-right': '12px' }" label="CrΓ©er" icon="pi pi-plus" (click)="onSubmit()">
                        </p-button>
                        <p-button styleClass="p-button-secondary" label="Annuler" icon="pi pi-arrow-circle-left" routerLink="form"> </p-button>
                    </div>
                </p-toolbar>
            </div>
        </div>
        <div class="p-grid">
            <div class="col-12">
                <form [formGroup]="form">
                    <div class="formgrid grid">
                        <div class="field col">
                            <label for="name">Nom</label>
                            <input
                                formControlName="name"
                                id="name"
                                type="text"
                                class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full"
                            />
                            <small class="p-error" *ngIf="categoryForm.name.invalid && isSubmitted">Nom requise</small>
                        </div>
                        <div class="field col">
                            <label for="icon">Icone</label>
                            <input
                                formControlName="icon"
                                id="icon"
                                type="text"
                                class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full"
                            />
                            <small class="p-error" *ngIf="categoryForm.icon.invalid && isSubmitted">Icone requise</small>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </p-card>
</div>

Enter fullscreen mode Exit fullscreen mode

categories-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CategoriesService, Category } from '@kartel/products';

@Component({
    selector: 'kartel-categories-form',
    templateUrl: './categories-form.component.html',
    styles: []
})
export class CategoriesFormComponent implements OnInit {
    form: FormGroup;

    isSubmitted: boolean = false;

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit(): void {
        this.form = this.formBuilder.group({
            name: ['', Validators.required],
            icon: ['', Validators.required]
        });
    }

    onSubmit() {
        this.isSubmitted = true;
        if (this.form.invalid) {
            return;
        }
        console.log(this.form.controls.name.value);
        console.log(this.form.controls.icon.value);
    }
    get categoryForm() {
        return this.form.controls;
    }
}
Enter fullscreen mode Exit fullscreen mode

Image description

Latest comments (2)

Collapse
 
kamil7x profile image
Kamil Trusiak
*ngIf="categoryForm.name.invalid && isSubmitted"
Enter fullscreen mode Exit fullscreen mode

Change it to:

*ngIf="categoryForm['name'].invalid && isSubmitted"
Enter fullscreen mode Exit fullscreen mode

And it the same for all other .name and .icon

Collapse
 
mvlhomme profile image
Mvlhomme Author

Please Help Me.

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!