合并2个输入字段值并按角度执行POST操作

Question

我有一个名为add-customer的组件。其中有2个输入字段
1）名
2）姓。
我要合并 1）名< / strong> 2）姓氏添加到名为 fullname 的变量。然后，我想单击保存按钮执行 POST 操作。因为在数据库中，有全名字段/ p>

  

下面是我的组件代码

HTML

 <div>
   <h2 color="primary">Add Customer</h2>
     <form [formGroup]="addCusForm">

      <mat-form-field>
        <input matInput placeholder="First Name" formControlName="firstname" required>
        <mat-error *ngIf="addCusForm.controls.firstname.hasError('required')">
          Please enter first name
        </mat-error>
      </mat-form-field>

      <mat-form-field>
        <input matInput placeholder="Last Name" formControlName="lastname" required>
        <mat-error *ngIf="addCusForm.controls.lastname.hasError('required')">
              Please enter last name
        </mat-error>
      </mat-form-field> 

    <button mat-flat-button type="submit" (click)="onaddCustomer()">Save</button>

  </form>
</div>

TS

  import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
  import {
      FormBuilder,
      FormControl,
      FormGroup,
      Validators,
   } from '@angular/forms';
  import { Router } from '@angular/router';
  import { IContact } from 'src/app/models/app.models';
  import { CustomersService } from 'src/app/services/customers.service';

  @Component({
    selector: 'asd-add-customer',
    templateUrl: './add-customer.component.html',
    styleUrls: ['./add-customer.component.css'],
  })

 export class AddCustomerComponent implements OnInit {
 public addCusForm: FormGroup;

 constructor(private fb: FormBuilder,
          public customersService: CustomersService) {}

 public ngOnInit(): void {
 this.addCusForm = this.fb.group({
   firstname: [null, [Validators.required],
   lastname: [null, [Validators.required],
   });
 }

 public onaddCustomer(): void {
   this.markAsDirty(this.addCusForm);
   this.someContact = this.addCusForm.value;
   this.customersService.addContact(this.someContact);
 }

  private markAsDirty(group: FormGroup): void {
    group.markAsDirty();
    for (const i in group.controls) {
    group.controls[i].markAsDirty();
   }
 }

}

从服务器获取后，我得到了一些用于压缩2字符串的示例，但是我想先进行连接，然后再将其发布到服务器。

Answer 1

这会为你工作吗？

this.customersService.addContact({
  // expand existing object with spread operator to new object
  ... this.addCusForm.value,
  // add field to new object with concatenated other fields
  fullname: `${this.addCusForm.value.fistname} ${this.addCusForm.value.lastname}`
});

是的，您不需要以下错误行：fullname = firstname + "" + lastname,

Answer 2

您可以使用以下解决方案：

public ngOnInit(): void {
   this.addCusForm = this.fb.group({
   firstname: [null, [Validators.required],
   lastname: [null, [Validators.required],
   //remove this line
   //fullname = firstname + "" + lastname,
 });
}

public onaddCustomer(): void {
  this.markAsDirty(this.addCusForm);
  this.someContact = Object.assign(this.addCustForm.value, { fullname: 
  this.addCustForm.value['firstname'] + ' ' + this.addCustForm.value['lastname'] });
  this.customersService.addContact(this.someContact);
}

Answer 3

我为您创建了工作示例。

https://stackblitz.com/edit/angular-98wdzu

ts文件

public addCusForm: FormGroup;

  fullname :any;
 constructor(private fb: FormBuilder) {

 }

 public ngOnInit() {
     this.addCusForm = this.fb.group({
      firstname: [null, [Validators.required]],
      lastname: [null, [Validators.required]]
      });
 }

  public onaddCustomer() {
    console.log("addCusForm",this.addCusForm.value);
    this.fullname =this.addCusForm.value.firstname + this.addCusForm.value.lastname;
  }

更新：->

this.someContact = this.addCusForm.value;
   this.customersService.addContact(this.someContact);//because you are send form value only. For example firstname, lastname wise. so you dont need like this.

到

let requestData={fullname:this.fullname};
   this.customersService.addContact(requestData);

Answer 4

尝试这个，我认为它可以帮助您

TS：

addCusForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.addCusForm = this.fb.group({
      name: this.fb.group ({
        firstname: [null, Validators.required],
   lastname: [null, Validators.required],
      }),
   fullname: new FormControl (null, Validators.required)
   })

   this.addCusForm.get('name').valueChanges.subscribe((value) => {
     this.addCusForm.get('fullname').setValue(this.addCusForm.get('name').get('firstname').value + " " + this.addCusForm.get('name').get('lastname').value)
   })
  }

此工作代码检查对您是否有帮助。或查看链接：

https://stackblitz.com/edit/angular-srwprr?file=src%2Fapp%2Fapp.component.ts