Question

我在Angular 10中有CURD应用程序。在这里，我使用简单的用户表单在数据库中插入数据。出于数据库目的，我使用了Microsoft Visual Studio。我在用户表单的所有错误。我认为由于recativeforms导致出现此错误。你能指导我如何在我的角度项目中正确使用Reactiveforms。

由于存在类似的问题，我尝试解决但存在相同的错误。

版本[角度10]

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {EmployeeService} from './employee.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeComponent } from './employee/employee.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

employee.component.html


<div class="container mt-lg-5 maindiv">
<h1 class="text-center mb-5 text-decoration-underline"><mark>Employee Registration</mark></h1>
<div class="row">
<div class="col-sm-6">
<form [FormGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="formGroupExampleInput">First name</label>
     <input type="text" class="form-control" formControlName="FirstName" id="formGroupExampleInput" placeholder="Your first name">
    </div>
    <div class="form-group col-md-6">
     <label for="formGroupExampleInput">Last name</label>
     <input type="text" formControlName="LastName" class="form-control" id="formGroupExampleInput" placeholder="Your last name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Gender</label>
    <input formControlName="Gender" type="text" class="form-control" id="inputAddress" placeholder="gender">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Designation</label>
    <input type="text" formControlName="Designation" class="form-control" id="inputAddress2" placeholder="degisnation">
  </div>
  <div class="form-row">
   
      <label for="inputEmail4">Email</label>
      <input type="email" formControlName="Email" class="form-control" placeholder="your Email" id="inputEmail4">
    </div>
   
     <div class="form-row">
    <div class="form-group col-md-12">
     <label for="inputAddress">Address</label>
    <input type="text" formControlName="Address" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
   
 
    
  </div>
  <button [disabled]="!employeeForm.valid" type="submit" class="btn btn-primary">Sign in</button>
  <button type="reset" (click)="resetForm()" class="btn btn-dark">Reset </button>
</form>
</div>

employee.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder,Validators} from '@angular/forms';
import {observable, Observable} from 'rxjs';
import {EmployeeService} from '../employee.service';
import {Employee} from '../employee';
import { TitleCasePipe } from '@angular/common';


@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  datasaved = false;
  employeeForm:any;
  allEmployees:Observable<Employee[]>;
  employeeIdToUpdate=null;
  massage=null;

  constructor(private formbuilder:FormBuilder,private employeeService:EmployeeService) { }

  ngOnInit(): void {
    this.employeeForm=this.formbuilder.group({
      FirstName:['',[Validators.required]],
      LastName:['',[Validators.required]],
      EmailId:['',[Validators.required]],
      Designaion:['',[Validators.required]],
      Gender:['',[Validators.required]],
      Address:['',[Validators.required]],
    });
    this.loadAllEmployees();
  }

  loadAllEmployees()
  {
    this.allEmployees=this.employeeService.getAllEmployee();
  }

  onFormSubmit()
  {
    this.datasaved=false;
    let employee = this.employeeForm.value;
    this.CreateEmployee(employee);
    this.employeeForm.reset();
  }

  CreateEmployee(employee:Employee)
  {
    if(this.employeeIdToUpdate==null)
    {
      this.employeeService.createEmployee(employee).subscribe(
        ()=>{
          this.datasaved=true;
          this.massage="Record saved successfully";
          this.loadAllEmployees();
          this.employeeIdToUpdate=null;
          this.employeeForm.reset();
        }
      );
    }else
    {
      employee.id=this.employeeIdToUpdate;
      this.employeeService.UpdateEmployee(employee)
      .subscribe(()=>{
        this.datasaved=true;
          this.massage="Record updated  successfully";
          this.loadAllEmployees();
          this.employeeIdToUpdate=null;
          this.employeeForm.reset();

      });
    }
  }


  loadEmployeeToEdit(employeeId:string)
  {
    this.employeeService.getEmployeeById(employeeId).subscribe(employee=>{
      this.massage=null;
      this.datasaved=false;
      this.employeeIdToUpdate=employee.id;
      this.employeeForm.controls['FirstName'].setvalue(employee.Firstname);
      this.employeeForm.controls['LastName'].setvalue(employee.Lastname);
      this.employeeForm.controls['EmailId'].setvalue(employee.Emailid);
      this.employeeForm.controls['Designation'].setvalue(employee.Designation);
      this.employeeForm.controls['Gender'].setvalue(employee.Gender);
      this.employeeForm.controls['Address'].setvalue(employee.Address);
    });
  }


  deleteEmployee(employeeId:string)
  {
    this.employeeService.DeleteEmployeeById(employeeId)
    .subscribe(()=>{
          this.massage="Record deleted successfully";
          this.loadAllEmployees();
          this.employeeIdToUpdate=null;
          this.employeeForm.reset();

    })
  }

  resetForm()
  {
    this.employeeForm.reset();
    this.massage=null;
    this.datasaved=false;
  }
}

我遇到的错误

Expected 0 arguments, but got 1.

9 <form [FormGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">
                                                            ~~~~~~~~~~~~~~~~~~

  src/app/employee/employee.component.ts:11:16
    11   templateUrl: './employee.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component EmployeeComponent.
src/app/employee/employee.component.html:9:7 - error NG8002: Can't bind to 'FormGroup' since it isn't a known property of 'form'.

9 <form [FormGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">
        ~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/employee/employee.component.ts:11:16
    11   templateUrl: './employee.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component EmployeeComponent.

您能帮忙为什么出现此错误吗

谢谢！!!!

Answer 1

您无法像以前那样在模板上达到ReactiveForm的值。

只需提交不带任何参数的表格，并将其放在ts文件中即可。而且formGroup指令也不是titleCase。它是camelCase，因此您需要将[FormGroup]="..."更改为[formGroup]="..."

employee.component.html

<form [formGroup]="employeeForm" (ngSubmit)="onFormSubmit()">

employee.component.ts

onFormSubmit() {
    const {value, valid} = this.employeeForm;
    if(valid) {
         console.log(value);
        // do something here.
    }
}

角度10：反应式表格无法正常工作

1 个答案: