Question

我一直在尝试制作FormGroup，但是我有一个问题。提交按钮不起作用。这是什么原因？创建是我项目中组件的名称。

create.component.html

<form (ngSubmit)="addPost(postsForm.value)" [formGroup]="postsForm">
  <p>full 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() {}
}

我的目的是在单击addPost()按钮后调用submit函数。你能帮我吗？

Answer 1

您的代码中有错字

在您的html中，您正在使用

[formGroup]="postsForm"

应该是

[formGroup]="postForm"

此外，您还需要在传递给addPost函数的同时对其进行更改

Answer 2

问题是您创建了一个名为formGroup的{{1}}

postForm

，并且在html中使用名称public postForm = new FormGroup({ title: new FormControl(''), content: new FormControl(''), cover: new FormControl('') });

postsForm

更改其中之一，问题已解决。

提交按钮在FormGroup中不起作用

2 个答案: