如何在反应式表单中设置模型数据，Angular 9答案

【问题标题】：How to set model data in Reactive Forms, Angular 9如何在反应式表单中设置模型数据，Angular 9
【发布时间】：2020-11-07 05:29:12
【问题描述】：

我开始研究 Angular，我使用 Angular 9 和 Spring boot 创建了一个单一的 crud，但我有一个问题，我想要做的是获取下表的数据并将其移动为反应形式上传数据。如何解决问题？

enter image description here . enter image description here

 <form [formGroup]="form" (ngSubmit)="submit()">
        <div class="form-group">
          <label for="">Nome</label>
          <input type="text" formControlName="nome" class="form-control">
        </div>
        
        <div class="form-group">
          <label for="">email</label>
          <input type="text" formControlName="email" class="form-control">
        </div>
        <div class="form-group">
          <label for="">username</label>
          <input type="text" formControlName="username" class="form-control">
        </div>

        <button  class="btn btn-outline-primary"> Salvar</button>
        <button [routerLink]="['/']" style="margin-left: 1%;"  class="btn btn-outline-warning"> Voltar</button>

      </form>

我的 app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ShowContactComponent } from './Componets/contact/show-contact/show-contact.component'
import { CreateContactComponent } from './Componets/contact/create-contact/create-contact.component'

const routes: Routes = [
  {path:'', component:ShowContactComponent},
  {path:'create', component:CreateContactComponent},
  {path:'create/:id', component:CreateContactComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Contact } from '../contact-model/Contact';
import { ContactService } from '../../contact.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-create-contact',
  templateUrl: './create-contact.component.html',
  styleUrls: ['./create-contact.component.css']
})
export class CreateContactComponent implements OnInit {

  form:FormGroup;
  contacts:Contact[] = []
  contact:Contact
  constructor(private service:ContactService, private router:Router, private fb:FormBuilder, private AR:ActivatedRoute) { }

  ngOnInit() {
    // this.paramService();
    this.validateForms();
  }

  submit(){
    const formValue = this.form.value;
    const contact:Contact = new Contact(formValue.nome,  formValue.email ,formValue.username );  
    this.service.create(contact).subscribe(response =>{
      this.contacts.push(response);
      this.router.navigate([''])
      console.log(response);
    })
  }


  paramService(){
    const formValue = this.form.value;
    const contact:Contact = new Contact(formValue.nome,  formValue.email ,formValue.username ); 
    console.log(contact);
    this.service.readOne(this.contact.id).subscribe(response =>{
      
      
      this.form.patchValue({
        nome: contact.nome,
        email: contact.email,
        username: contact.username
      });
    });
  }
    
  

  validateForms(){
    this.form = this.fb.group({
      nome: ['', Validators.required],
      email: ['', Validators.required],
      username: ['', Validators.required]
    })
  }

}

【问题讨论】：

标签： html css angular spring typescript

【解决方案1】：

你可以这样做：

validateForms(data?: Contact){
   this.form = this.fb.group({
     nome: [data.name || '', Validators.required],
     email: [data.email || '', Validators.required],
     username: [data.username || '', Validators.required]
   })
}

现在您应该传递数据以显示在您的表单中：

ngOnInit() {
   // const contact: Contact = ...
   this.validateForms(contact);
}

请将“validateForms”名称更改为“initForm”。

【讨论】：