форма sumbit с пост-методом (угловая 7, symfony 4)

Question

Я добавляю проект из формы. Метод Post в задней части является функциональным, но в передней части есть проблема, связанная с тем, что я новичок в изучении угловых Мне нужна помощь и спасибо

Итак, вот обратный метод

   public function postAction(Request $request, Validator $validator)
{
    $data = $request->request->all();

    /** @var Project $project */
    $project = $validator->validateForm(ProjectType::class, $data)->getData();
    $this->projectManager->saveProject($project);

    return new ApiCreatedResponse(['project' => $project]);

}

, впереди - Project.service

 postProject(project: Project): Observable<any> {
    return this.http.post(this.url('projects'), project)
        .pipe(map(this.mapResponse), catchError(this.failed));
}

import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
import {ApiError, BaseFormComponent} from '../../../shared';
import {Project} from '../../../shared/models/project.model';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-project-form',
  templateUrl: './project-form.component.html',
  styleUrls: ['./project-form.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush

})
export class ProjectFormComponent extends BaseFormComponent implements OnInit{

    @Input() project: Project;
    @Output() submitProject = new EventEmitter<Project>();
    @Output() cancel = new EventEmitter();



    constructor(private formBuilder: FormBuilder)
  {
      super();

  }

  ngOnInit(): void {
   //   this.setSubmitted();
      console.log(this.form.valid);
      console.log(this.form.value);
      if (this.form.valid) {
          this.submitProject.emit(this.form.value);
      }
  }


    onSubmitProject(): void {
        this.setSubmitted();

        if (this.form.valid) {
            this.submitProject.emit(this.form.value);
        }
    }

    onCancel(): void {
        this.cancel.emit();
    }


    /**
     * Create reactive form with validation constraints
     *
     * @returns {FormGroup}
     */
    protected buildForm(): FormGroup {
        return this.formBuilder.group({
            title: [''],
            url: [''],
            urlSsh: ['']
        });
    }

}



****here is my compoenent(parent) project-edit.ts****

вот мой компонент (родительский) project-edit.html

<mat-card class="example-card">
    <mat-card-header>

        <mat-card-title><h3>Ajouter un nouveau Projet</h3></mat-card-title>
    </mat-card-header>
    <form name="profileForm" [formGroup]="form" (ngSubmit)="onSubmitProject()" novalidate >
        <div fxLayout="column" fxLayoutAlign="center">
            <mat-form-field>
                <label>
                    <input matInput formControlName="title" >
                </label>

            </mat-form-field>
            <mat-form-field>
                <label>
                    <input matInput formControlName="url" >
                </label>
            </mat-form-field>

            <mat-form-field>
                <label>
                    <input matInput  formControlName="urlSsh" >
                </label>
            </mat-form-field>
            <mat-form-field>
                <mat-select placeholder="Select" >
                    <mat-option value="option">Angular</mat-option>
                    <mat-option value="option">Symfony</mat-option>
                    <mat-option value="option">NodeJs</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <div fxLayout="row" fxLayoutAlign="end">
            <button mat-raised-button color="accent">
                <span>Enregister</span>
            </button>
        </div>
    </form>
</mat-card>

вот мой компонент (дети) project-form.ts

import { Component, OnInit } from '@angular/core';
import {ApiError} from '../../shared';
import {Project} from '../../shared/models/project.model';
import {ActivatedRoute, Router} from '@angular/router';
import {ProjectService} from '../../core/services/project.service';
import {finalize} from 'rxjs/operators';

@Component({
  selector: 'app-project-edit',
  templateUrl: './project-edit.component.html',
  styleUrls: ['./project-edit.component.scss']
})
export class ProjectEditComponent implements OnInit {
    project: Project;

    /**
     * Inject required services.
     *
     * @param {ActivatedRoute} route
     * @param {ProjectService} projectService
     * @param {Router} router
     */

  constructor(private route: ActivatedRoute,
              private projectService: ProjectService,
              private router: Router) {

    }
    /**
     * Retrieve loaded project.
     */
    ngOnInit(): void {
        this.project = this.route.snapshot.data.project;
    }

    /**
     * Submit a Project form
     */
    onSubmitProject(project): void {
        const saveProject = this.projectService.postProject(project);
        saveProject.pipe()
            .subscribe(
                data => this.router.navigate(['/projects', data.project.id]),
            );
    }
    /**
     * Cancel edition
     */
    onCancel(): void {
        this.router.navigate(this.project ? ['/projects', this.project.id] : ['/projects', 'list']);
    }

}

вот мой компонент (дети) project-form.html

<div id="notes" class="page-layout simple">

    <!-- HEADER -->
    <div class="header accent p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
         fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">

        <!-- APP TITLE -->
        <div fxLayout="row" fxLayoutAlign="start center">
            <div class="logo" fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="logo-icon mr-16"
                          >note
                </mat-icon>
                <span class="logo-text h1">
                    {{'project.edit.newProject' | translate}}
                </span>
            </div>

        </div>
        <!-- / APP TITLE -->


    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->

    <!-- CONTENT CARD -->
    <div class="content-card">
        <!-- CONTENT -->
        <div class="content p-24">
            <app-project-form
                [project]="project"
                (submitProject)="onSubmitProject($event)">
            </app-project-form>
        </div>
        <!-- / CONTENT -->

    </div>
    <!-- / CONTENT CARD -->
    <!-- / CONTENT-->
</div>

и это ошибка

* Ошибка: formControlName должно использоваться с родительской директивой formGroup.Вы захотите добавить директиву formGroup и передать ей существующий экземпляр FormGroup (вы можете создать его в своем классе).

  Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});
at Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.controlParentException (forms.js:1128)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._checkParentType (forms.js:4954)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4958)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4909)
at checkAndUpdateDirectiveInline (core.js:9246)
at checkAndUpdateNodeInline (core.js:10514)
at checkAndUpdateNode (core.js:10476)
at debugCheckAndUpdateNode (core.js:11109)
at debugCheckDirectivesFn (core.js:11069)
at Object.eval [as updateDirectives] (ProjectFormComponent.html:17)*