Why is this form validation with dynamic input values not working?

Question

Just started practicing angular... I have made a reactive form (in parent component) in angular whose values are dynamically filled by child component. On submitting this form null values are saved since form is not detecting the values although values are visible in input fields.

Note: input values are showing in parent component (child to parent communication is successful)

Here is the necessary code:

Child component- ts file

@Output() messageToEmit = new EventEmitter<string>();
@Output() messageToEmit1 = new EventEmitter<string>();
@Output() messageToEmit2 = new EventEmitter<string>();
@Output() messageToEmit3 = new EventEmitter<string>();

save(selectedItem: any, index: number)
{
var num1 = selectedItem.f;
var num2 = selectedItem.l;
var num3 = selectedItem.e;
var num4 = selectedItem.p;

this.messageToEmit.emit(num1);
this.messageToEmit1.emit(num2);
this.messageToEmit2.emit(num3);
this.messageToEmit3.emit(num4);
 }

Child component- html file

  <table class="w3-table-all">
<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Password</th>
     <th>Edit / Update</th>
  </tr>
 </thead>
<tr *ngFor="let thing of things; let i = index;">   
  <td><input type="text" value="{{thing.f}}" id="{{ 'f' + i }}"> </td>
  <td><input type="text" value="{{thing.l}}"  id="{{ 'l' + i }}"> </td>
  <td><input type="text" value="{{thing.e}}"  id="{{ 'u' + i }}"> </td>
  <td><input type="text" value="{{thing.p}}"  id="{{ 'p' + i }}"> </td>
  <td >
    <button (click) = "save(thing,i)">Edit</button>
    </td>
  </tr> 
  </table>

Parent component - ts file

export class ParentComponent implements OnInit {
edited_values: string;
edited_values1: string;
edited_values2: string;
edited_values3: string;
edited_values4:  number;

name = 'Registration';
signupForm:FormGroup;
FirstName:string = "";
LastName:string = "";
Email:string = "";
Password:string = "";

constructor(
private frmbuilder: FormBuilder,
)
{
this.signupForm= frmbuilder.group({
fname:new FormControl('', [
Validators.required,
Validators.maxLength(50),
Validators.minLength(3),
Validators.pattern('^[a-zA-Z ]*$')
]),
lname:new FormControl('', [
Validators.required,
Validators.maxLength(50),
Validators.minLength(3),
Validators.pattern('^[a-zA-Z ]*$')
]),
 email:['',[Validators.required,Validators.email]],
userpassword:new FormControl('', [
Validators.required,
Validators.maxLength(50)
])
});
} 
ngOnInit(){
}

postdata(signupForm:any)
{
this.FirstName=signupForm.controls.fname.value;
this.LastName=signupForm.controls.lname.value;
this.Email=signupForm.controls.email.value;
this.Password=signupForm.controls.userpassword.value;

this.signupForm.reset();
}

getMessage(message: string) {
this.edited_values = message;
}
getMessage1(message1: string) {
this.edited_values1 = message1;
}
getMessage2(message2: string) {
this.edited_values2 = message2;
}
getMessage3(message3: string) {
this.edited_values3 = message3;
 }
reset(){
this.signupForm.reset();
}
}

Parent component- html file

<form id="contact" [formGroup]='signupForm' (ngSubmit)="postdata(signupForm)">
<h3> Register Now! </h3>  
<div class = "form-group">
  <input type="text" formControlName='fname' placeholder="your First name" value={{edited_values}}>
</div>
<div *ngIf="signupForm.controls.fname.invalid && signupForm.controls.fname.touched">
<small> Enter name please (only letters)!  </small>
</div>
<br>
<div class = "form-group"> 
<input type="text" formControlName='lname' placeholder="your Last name"
value={{edited_values1}}>
</div>
<div *ngIf="signupForm.controls.lname.invalid && signupForm.controls.lname.touched">
<small> Enter name please (only letters)!  </small>
</div>
<br>
<div class = "form-group">
<input type="text" formControlName='email' placeholder="your Email id"
value={{edited_values2}}>
</div>
<div *ngIf="signupForm.controls.email.invalid && signupForm.controls.email.touched">
<small>  Email is invalid  </small>
</div>
<br>
<div class = "form-group">
<input type="Password" formControlName='userpassword' placeholder="your password"
value={{edited_values3}}>
</div>
<div *ngIf="signupForm.controls.userpassword.invalid && signupForm.controls.userpassword.touched">
<small> Must enter password in correct format: min 8 characters, at least 1 uppercase, 1 lowercase, 
1 number, 1 special:  </small>
</div>
  <br>
    <div>      
   <button type="submit" > Submit </button>
   <button type="reset" (click) = "reset()"> Reset </button>
 </div>
 </form>
 </div>
 <app-edit 
 (messageToEmit)="getMessage($event)"
 (messageToEmit1)="getMessage1($event)"
 (messageToEmit2)="getMessage2($event)"
 (messageToEmit3)="getMessage3($event)"
 (messageToEmit4)="getMessage4($event)" 
 ></app-edit>

You’re not doing anything in your parent to set any form values? — MikeOne
– MikeOne, Commented Dec 9, 2019 at 16:10
@MikeOne I am using child component to parent comp. communication.In the parent component html- inside input tags, values are set by data-binding inside {{}}. Also last few lines in this html file receive values from child component — ASHISH
– ASHISH, Commented Dec 9, 2019 at 16:24
Value is only for an initial setting. I think you might have to rethink this a bit. — MikeOne
– MikeOne, Commented Dec 9, 2019 at 17:23
What you want is actually pretty simple and can also be done without all the different event handlers.. — MikeOne
– MikeOne, Commented Dec 9, 2019 at 17:25
@MikeOne actually what i have put here is only necessary code which might seem as initial setting. Actually the values are coming from child component on every click of button. My problem is, this form is not detecting the values which are dynamically binded. — ASHISH
– ASHISH, Commented Dec 9, 2019 at 18:23

Eliseo · Accepted Answer · 2019-12-09 18:52:21Z

3

@ASHISH, when you use ReactiveForms NOT use [value], in the inputs, it's only formControlName

<!---WRONG--->
<input type="text" formControlName='fname' placeholder="your First name" value={{edited_values}}>

<!--OK-->
<input type="text" formControlName='fname' placeholder="your First name" >

And you need change the value using the "method" setValue, so yours functions getMessage must be like

getMessage(message: string) {
   this.signupForm.get('fname').setValue(message)
}

answered Dec 9, 2019 at 18:52

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

Collectives™ on Stack Overflow

Why is this form validation with dynamic input values not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related