2

I have component called edit-customer which is an dialog window, which will receive the injected object from other component and will display that injected object properties(name,email).Below is the component code.

HTML

<form [formGroup]="editForm">
    <mat-form-field >
        <input matInput [(ngModel)]="data.name"   placeholder="Name"  formControlName="name" >
    </mat-form-field>
    <mat-form-field >
        <input matInput [(ngModel)]="data.EMailAddresses"   placeholder="Email Id"  formControlName="email" >
    </mat-form-field>
      <button mat-flat-button (click)="onEdit()">Save</button>
</form>

TS

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

@Component({
  selector: 'atd-edit-customer',
  templateUrl: './edit-customer.component.html',
  styleUrls: ['./edit-customer.component.scss'],
})
export class EditCustomerComponent implements OnInit {
  public editForm: FormGroup;
  public someContact: IContact; 

  constructor(@Inject(MAT_DIALOG_DATA) public data: IContact,
              private fb: FormBuilder,
              public customersService: CustomersService,
              ) {} 

  public ngOnInit(): void {
    this.editForm = this.fb.group({
      name: [null],
      email: [null,[Validators.email],
    });
  }

  public onEdit(): void {
    this.someContact = this.editForm.value;
    this.someContact.EMailAddresses= [];
    this.someContact.EMailAddresses.push(this.editForm.value.email); <========
    this.customersService.updateContact(this.someContact);
  }
}

JSON looks like this:

export interface IContact {
  id:       string;
  name:     string
  emailId:  string[];
}

Now the issue is:

  • When i hit the SAVE button without making any changes in the email input field, The PUT operation is not happening and i am getting this response:

enter image description here

  • But if a make some changes in the email input field and hit the SAVE button, The PUT operation works fine.

I am pushing email like this:

this.someContact.EMailAddresses= [];
this.someContact.EMailAddresses.push(this.editForm.value.email); 

What's wrong with the code ??

7
  • Do you want to push the this.editForm.value.email Id in this.someContact.EMailAddresses array? Commented Mar 21, 2019 at 5:55
  • Ya i want to push it to this.someContact.EMailAddresses Commented Mar 21, 2019 at 5:55
  • Now the push is working only if i make some changes in the email i/p field, even i didn't make any changes also it should push. Commented Mar 21, 2019 at 5:56
  • N how about API call is it getting called successfully? Commented Mar 21, 2019 at 6:02
  • Only if make changes in email then api call is successful, If not getting error as shown in the given image. Commented Mar 21, 2019 at 6:06

1 Answer 1

1

Really; your question isn't clear.

But as i understood; that you face an issue when the user press on save button without making any changes.

To solve this issue, you shouldn't use ngModel with formControlName; just one of them on the element.

What does happen in your case?

you set the default value of email control to be null, and it won't be filled through ngModel, so; if there's no new entered value it will stay null, until new value added.

But i can see the value?!

Yes; that filled from ngModel, not from the control.

Try this:

public ngOnInit(): void {
    this.editForm = this.fb.group({
        name: [this.data.name],
        email: [this.data.EMailAddresses.,[Validators.email],
    });
}

And remove ngModel from the fromFields.

BTW, using ngModel with formControlName will cause an error in the newer versions of Angular.

Sign up to request clarification or add additional context in comments.

7 Comments

Sorry the issues still persists.
Can you log someContact value?
Only if change f i didn't make any changes in email i/p field the issues is coming.
let me understand well, you cannot get email value if the email field doesn't change only?
The log looks like this: EMailAddresses: Array(1) 0: ["[email protected]"]
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.