Canot find error who gives me "Can't bind to 'FormGroup' since it isn't a known property of...

Discussão em 'Angular' iniciado por Zayno lane, Dezembro 15, 2024.

  1. Zayno lane

    Zayno lane Guest

    Im having this error and i cannot find where it is im following a tutorial on youtube i tried searching on google ad i get alot of examples and i tried all from adding the FormsModule with CommonModule and ReactiveFormsModule, and also tried importing it in the component ut all to no avail.

    here is the component code:

    ```import { Component, OnInit } from '@angular/core';
    import { FormControl, FormGroup, Validators } from '@angular/forms';


    @Component({
    selector: 'app-create-post',
    templateUrl: './create-post.component.html',
    styleUrl: './create-post.component.css',
    })
    export class CreatePostComponent implements OnInit {
    enteredTitle = '';
    enteredContent = '';
    forms: FormGroup | any;
    private mode = 'create';
    private postId: any;
    public post: Post | any;

    constructor(
    public postService: PostServiceService,
    public route: ActivatedRoute
    ) {}

    ngOnInit() {
    this.forms = new FormGroup({
    title: new FormControl(null, {
    validators: [Validators.required, Validators.minLength(3)],
    }),
    content: new FormControl(null, {
    validators: [Validators.required],
    }),
    });

    this.route.paramMap.subscribe((paramMap: ParamMap) => {
    if (paramMap.has('postId')) {
    this.mode = 'edit';
    this.postId = paramMap.get('postId');
    this.postService.getPosts(this.postId).subscribe((postData) => {
    this.post = {
    id: postData._id,
    title: postData.title,
    content: postData.content,
    };
    this.forms.setValue({
    title: this.post.title,
    content: this.post.content,
    });
    });
    } else {
    this.mode = 'create';
    this.postId = null;
    }
    });
    }

    onAddPost() {
    if (this.forms.invalid) {
    return;
    }
    if (this.mode === 'create') {
    this.postService.addPost(
    this.forms.value.id,
    this.forms.value.title,
    this.forms.value.content
    );
    } else {
    this.postService.updatePost(
    this.postId,
    this.forms.value.title,
    this.forms.value.content
    );
    }
    this.forms.reset();
    }
    }```

    here is the html form:


    ```<mat-card>
    <form [FormGroup]="forms" (submit)="onAddPost()">
    <mat-form-field style="margin-top: 20px">
    <mat-label>Titulo</mat-label>
    <input matInput formControlName="title" />
    <mat-error *ngIf="forms.get('title').invalid"
    >Porfabor yena un titulo di minimo 20 karakter</mat-error
    >
    </mat-form-field>
    <mat-form-field style="background-color: rgb(230, 227, 227)">
    <mat-label>Contenido</mat-label>
    <textarea matInput rows="10" formControlName="content"></textarea><br />
    <mat-error *ngIf="forms.get('content').invalid"
    >Porfabor yena bo contenido</mat-error
    >
    </mat-form-field>
    <button
    mat-flat-button
    color="primary"
    style="border-radius: 25px; width: 250px; margin: 20px 0 20px 3px"
    type="submit"
    >
    Post
    </button>
    </form>
    </mat-card>```

    Continue reading...

Compartilhe esta Página