Register
Loading
Form Group Validation  
  •   
  •         class="form-group">  
  •           for="exampleInputPassword1">Password  
  •          
  •   
  •           "password"  class="form-control"  formControlName="password" placeholder="Password">  
  •   
  •           class="error" style="color: red; font-weight: bold;" *ngIf="password && password.invalid && password.touched">Zorunlu  
  •                  
  •   
  •         class="form-group">  
  •           for="exampleInputEmail1">First Name  
  •           "text"  class="form-control"  formControlName="firstName" placeholder="First Name">  
  •           class="error" style="color: red; font-weight: bold;" *ngIf="firstName && firstName.invalid && firstName.touched">Zorunlu  
  •           
  •   
  •   
  •         class="form-group">  
  •           for="exampleInputEmail1">Last Name  
  •   
  •           "email"  class="form-control"  formControlName="lastName" placeholder="Last Name">  
  •   
  •           class="error" style="color: red; font-weight: bold;" *ngIf="lastName && lastName.invalid && lastName.touched">Zorunlu  
  •           
  •   
  •            
  •   
  •       class="card-footer">  
  •         "submit"  class="btn btn-primary float-right">Register  
  •           
  •           
  •   
  •          
  •         
  •       
  •     
  •   
  •   
  •   
  •   
  •     
  •   
    •  
    1. import { Component, OnInit,Input } from '@angular/core';  
    2. import { SharedService } from 'src/app/shared.service';  
    3. import { FormControl, FormGroup, Validators } from '@angular/forms';  
    4.   
    5.   
    6.   
    7.   
    8. @Component({  
    9.   selector: 'app-add-edit-users',  
    10.   templateUrl: './add-edit-users.component.html',  
    11.   styleUrls: ['./add-edit-users.component.sass'],  
    12.   providers:[SharedService]  
    13. })  
    14. export class AddEditUsersComponent implements OnInit {  
    15.   
    16.   constructor(private service:SharedService) { }  
    17.   
    18.   kisiForm=new FormGroup({  
    19.     CustomerCode:new FormControl('',[Validators.required]),  
    20.     email:new FormControl(''),  
    21.     password:new FormControl(''),  
    22.     firstName:new FormControl(''),  
    23.     lastName:new FormControl('')  
    24.   });  
    25.   
    26.   
    27.   
    28. stringifiedData: any;    
    29. parsedJson: any;    
    30.   
    31.   
    32.   ngOnInit(): void {  
    33.   }  
    34.   
    35.    
    36.   
    37.   
    38.   SaveKisi(){  
    39.     var val = {  
    40.         //CustomerCode:this.registerform.get('CustomerCode'),  
    41.         //password:this.registerform.get('Password'),  
    42.         //email:this.registerform.get('email'),  
    43.         //firstName:this.registerform.get('firstName'),  
    44.         //lastName:this.registerform.get('lastName')  
    45.         
    46.       };  
    47.   
    48.   
    49.   
    50.     this.stringifiedData = JSON.stringify(val);        
    51.     this.parsedJson = JSON.parse(this.stringifiedData);    
    52.     
    53.   
    54.   this.service.addUser(this.kisiForm.value).subscribe(res=>{  
    55.     alert("Kaydedildi");  
    56.     alert(JSON.stringify(res));  
    57.     var tok = res.token;  
    58.     var toks = res.expiration;  
    59.   
    60.     alert(toks);  
    61.   
    62.   });  
    63. }  
    64.   
    65. }  
     
  • Srinivasan Ramamoorthi

    Srinivasan RamamoorthiPosted Nov 10, 2021, 12:39 PM

    the formcontrol name mentioned in view (html file) is not matching the formcontrol defined in Formgroup (model).

    Keep it as lastname in both the places.  

     

    For example, lastnames is mentioned in html for formcontrol name, but in the formgroup the formcontrol name is lastname.

     

    You have to keep the form control name same in view and model