I've been working on creating a FormGroup, but I've encountered an issue with the submit button not functioning as expected. The component in question is named create. Any idea what could be causing this problem?
create.component.html
<form (ngSubmit)="addPost(postsForm.value)" [formGroup]="postsForm">
<p>Fill out the form</p>
<label for="title">Title</label>
<input type="text" formControlName="title" />
<label for="content">Content</label>
<textarea formControlName="content"></textarea>
<label for="cover" class="cover">Choose a file</label>
<input
type="file"
name="cover"
id="cover"
(change)="handleInput(event)"
formControlName="cover"
/>
<input type="submit" value="Submit" />
</form>
create.component.ts
import { Component, OnInit } from '@angular/core';
import { DesignService } from '../design.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'ngx-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.scss']
})
export class CreateComponent implements OnInit {
constructor(private service: DesignService) {}
image: any = null;
public postForm = new FormGroup({
title: new FormControl(''),
content: new FormControl(''),
cover: new FormControl('')
});
public handleInput($event: Event) {
alert('handlse');
this.image = $event.target['files'];
}
public addPost(data: FormData) {
alert('this is add post');
this.service.createPost(data, this.image);
}
ngOnInit() {}
}
My goal is to trigger the addPost() function upon clicking the submit button. Can you provide any assistance?