form.valid is not getting updated even though the form is valid in reactive forms angular 6
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I have implemented reactive forms my form.valid is not getting updated even after filling the required fields. My form.valid is false even after filling all the required fields. But the form.value is getting update properly but same with both form.valid and form.invalid flags are not getting updated
UI looks like this
<div class="form-feilds">
<div class="form-content">
<form [formGroup]="personalInfo" (ngSubmit)="onSubmit()">
<div formArrayName="details" *ngFor="let field of personalInfo.controls.details['controls']; let index = index;" style="padding-left: 0px; padding-right: 0px;">
<div class="row formgroup1" [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 first-form">
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">First Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="firstName">
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<label class="pull-right">Full Middle Name*</label>
</div>
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<input type="text" class="form-control" formControlName="fullMiddleName">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2" style="margin-top: 9px;">
<label class="switch">
<input type="checkbox" formControlName="none">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Last Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="lastName">
</div>
</div>
<div class="row margin">
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-right: 0px;">
<label class="pull-right">Suffix</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="suffix">
<option>Ms.</option>
<option>Mrs.</option>
<option>Mr.</option>
</select>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-left: 0px;padding-right: 0px;">
<label class="pull-right">Gender*</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Maiden Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="maidenName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License #</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="licenseNumber">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License State</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="licenseState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Home Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="homePhone">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">Mobile Phone*</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="mobile">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">SSN/SIN</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="ssn">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"><label class="pull-right">Date of Birth*</label></div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<div class="input-group">
<input class="form-control text-color" name="dp" ngbDatepicker #dob="ngbDatepicker" formControlName="dob">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="dob.toggle()" type="button"><i class="fa fa-calendar-o"
aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="currentAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Current Address*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="addressCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currRent">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveIn" ngbDatepicker #currMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveOut" ngbDatepicker #currMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="previousAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Previous Address</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevRent">
<option>Rent</option>
<option>Own</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveIn" ngbDatepicker #prevMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveOut" ngbDatepicker #prevMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
constructor(private fb: FormBuilder, private router: Router, public shared: SharedServiceService) {
this.shared.headingText = 'Personal Information';
this.tabs.push({ title: 'Primary Applicant', id: this.tabsCount });
this.personalInfo = this.fb.group({
details: this.fb.array([this.createFormControls()])
});
this.shared.personalInfoFormDetails = this.personalInfo;}
createFormControls() {
const personalDetailsGroup = this.fb.group({
firstName: new FormControl('', Validators.required),
maidenName: new FormControl(''),
homePhone: new FormControl(''),
fullMiddleName: new FormControl('', Validators.required),
none: new FormControl(''),
licenseNumber: new FormControl(''),
mobile: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
licenseState: new FormControl(''),
ssn: new FormControl(''),
suffix: new FormControl(''),
gender: new FormControl('', Validators.required),
dob: new FormControl('', Validators.required),
currentAddress: new FormGroup({
currAddress: new FormControl('', Validators.required),
landlordName: new FormControl(''),
addressCont: new FormControl(''),
landlordPhone: new FormControl(''),
currCity: new FormControl('', Validators.required),
currAmount: new FormControl(''),
currState: new FormControl('', Validators.required),
currPeriod: new FormControl(''),
currCode: new FormControl('', Validators.required),
currMoveIn: new FormControl(''),
currRent: new FormControl(''),
currMoveOut: new FormControl('')
}),
previousAddress: new FormGroup({
prevAddress: new FormControl(''),
prevLandlordName: new FormControl(''),
prevCont: new FormControl(''),
prevLandlordPhone: new FormControl(''),
prevCity: new FormControl('', Validators.required),
prevAmount: new FormControl(''),
prevState: new FormControl('', Validators.required),
prevPeriod: new FormControl(''),
prevCode: new FormControl('', Validators.required),
prevMoveIn: new FormControl(''),
prevRent: new FormControl(''),
prevMoveOut: new FormControl('')
})
});
return personalDetailsGroup;
}
angular angular6 angular-reactive-forms reactive-forms asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
|
show 2 more comments
1
I have implemented reactive forms my form.valid is not getting updated even after filling the required fields. My form.valid is false even after filling all the required fields. But the form.value is getting update properly but same with both form.valid and form.invalid flags are not getting updated
UI looks like this
<div class="form-feilds">
<div class="form-content">
<form [formGroup]="personalInfo" (ngSubmit)="onSubmit()">
<div formArrayName="details" *ngFor="let field of personalInfo.controls.details['controls']; let index = index;" style="padding-left: 0px; padding-right: 0px;">
<div class="row formgroup1" [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 first-form">
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">First Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="firstName">
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<label class="pull-right">Full Middle Name*</label>
</div>
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<input type="text" class="form-control" formControlName="fullMiddleName">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2" style="margin-top: 9px;">
<label class="switch">
<input type="checkbox" formControlName="none">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Last Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="lastName">
</div>
</div>
<div class="row margin">
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-right: 0px;">
<label class="pull-right">Suffix</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="suffix">
<option>Ms.</option>
<option>Mrs.</option>
<option>Mr.</option>
</select>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-left: 0px;padding-right: 0px;">
<label class="pull-right">Gender*</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Maiden Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="maidenName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License #</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="licenseNumber">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License State</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="licenseState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Home Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="homePhone">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">Mobile Phone*</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="mobile">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">SSN/SIN</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="ssn">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"><label class="pull-right">Date of Birth*</label></div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<div class="input-group">
<input class="form-control text-color" name="dp" ngbDatepicker #dob="ngbDatepicker" formControlName="dob">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="dob.toggle()" type="button"><i class="fa fa-calendar-o"
aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="currentAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Current Address*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="addressCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currRent">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveIn" ngbDatepicker #currMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveOut" ngbDatepicker #currMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="previousAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Previous Address</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevRent">
<option>Rent</option>
<option>Own</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveIn" ngbDatepicker #prevMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveOut" ngbDatepicker #prevMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
constructor(private fb: FormBuilder, private router: Router, public shared: SharedServiceService) {
this.shared.headingText = 'Personal Information';
this.tabs.push({ title: 'Primary Applicant', id: this.tabsCount });
this.personalInfo = this.fb.group({
details: this.fb.array([this.createFormControls()])
});
this.shared.personalInfoFormDetails = this.personalInfo;}
createFormControls() {
const personalDetailsGroup = this.fb.group({
firstName: new FormControl('', Validators.required),
maidenName: new FormControl(''),
homePhone: new FormControl(''),
fullMiddleName: new FormControl('', Validators.required),
none: new FormControl(''),
licenseNumber: new FormControl(''),
mobile: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
licenseState: new FormControl(''),
ssn: new FormControl(''),
suffix: new FormControl(''),
gender: new FormControl('', Validators.required),
dob: new FormControl('', Validators.required),
currentAddress: new FormGroup({
currAddress: new FormControl('', Validators.required),
landlordName: new FormControl(''),
addressCont: new FormControl(''),
landlordPhone: new FormControl(''),
currCity: new FormControl('', Validators.required),
currAmount: new FormControl(''),
currState: new FormControl('', Validators.required),
currPeriod: new FormControl(''),
currCode: new FormControl('', Validators.required),
currMoveIn: new FormControl(''),
currRent: new FormControl(''),
currMoveOut: new FormControl('')
}),
previousAddress: new FormGroup({
prevAddress: new FormControl(''),
prevLandlordName: new FormControl(''),
prevCont: new FormControl(''),
prevLandlordPhone: new FormControl(''),
prevCity: new FormControl('', Validators.required),
prevAmount: new FormControl(''),
prevState: new FormControl('', Validators.required),
prevPeriod: new FormControl(''),
prevCode: new FormControl('', Validators.required),
prevMoveIn: new FormControl(''),
prevRent: new FormControl(''),
prevMoveOut: new FormControl('')
})
});
return personalDetailsGroup;
}
asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
that is becausecurrentAddressandpreviousAddresssub-controls have required fields and you need to supply those
– John Velasquez
Jan 4 at 9:56
Hi @JohnVelasquez I have updated the code in updated code there is currentAddress and previousAddress
– Balaji Venkateswaran
Jan 4 at 10:14
why do you have multiple form tags? where it should be only one form tag
– John Velasquez
Jan 4 at 10:26
@JohnVelasquez there only form tag but multiple formgroupname becasue they are different formarray is used because in application the form is dynamic
– Balaji Venkateswaran
Jan 4 at 10:31
then you should group also those controls which are not related tocurrentAddressandpreviousAddress, example:info: new FormGroup({firstName, maidenName,homePhone ......})so that it would not affect the validation of the other formgroups
– John Velasquez
Jan 4 at 10:36
|
show 2 more comments
1
1
1
I have implemented reactive forms my form.valid is not getting updated even after filling the required fields. My form.valid is false even after filling all the required fields. But the form.value is getting update properly but same with both form.valid and form.invalid flags are not getting updated
UI looks like this
<div class="form-feilds">
<div class="form-content">
<form [formGroup]="personalInfo" (ngSubmit)="onSubmit()">
<div formArrayName="details" *ngFor="let field of personalInfo.controls.details['controls']; let index = index;" style="padding-left: 0px; padding-right: 0px;">
<div class="row formgroup1" [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 first-form">
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">First Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="firstName">
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<label class="pull-right">Full Middle Name*</label>
</div>
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<input type="text" class="form-control" formControlName="fullMiddleName">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2" style="margin-top: 9px;">
<label class="switch">
<input type="checkbox" formControlName="none">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Last Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="lastName">
</div>
</div>
<div class="row margin">
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-right: 0px;">
<label class="pull-right">Suffix</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="suffix">
<option>Ms.</option>
<option>Mrs.</option>
<option>Mr.</option>
</select>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-left: 0px;padding-right: 0px;">
<label class="pull-right">Gender*</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Maiden Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="maidenName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License #</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="licenseNumber">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License State</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="licenseState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Home Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="homePhone">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">Mobile Phone*</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="mobile">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">SSN/SIN</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="ssn">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"><label class="pull-right">Date of Birth*</label></div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<div class="input-group">
<input class="form-control text-color" name="dp" ngbDatepicker #dob="ngbDatepicker" formControlName="dob">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="dob.toggle()" type="button"><i class="fa fa-calendar-o"
aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="currentAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Current Address*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="addressCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currRent">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveIn" ngbDatepicker #currMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveOut" ngbDatepicker #currMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="previousAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Previous Address</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevRent">
<option>Rent</option>
<option>Own</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveIn" ngbDatepicker #prevMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveOut" ngbDatepicker #prevMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
constructor(private fb: FormBuilder, private router: Router, public shared: SharedServiceService) {
this.shared.headingText = 'Personal Information';
this.tabs.push({ title: 'Primary Applicant', id: this.tabsCount });
this.personalInfo = this.fb.group({
details: this.fb.array([this.createFormControls()])
});
this.shared.personalInfoFormDetails = this.personalInfo;}
createFormControls() {
const personalDetailsGroup = this.fb.group({
firstName: new FormControl('', Validators.required),
maidenName: new FormControl(''),
homePhone: new FormControl(''),
fullMiddleName: new FormControl('', Validators.required),
none: new FormControl(''),
licenseNumber: new FormControl(''),
mobile: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
licenseState: new FormControl(''),
ssn: new FormControl(''),
suffix: new FormControl(''),
gender: new FormControl('', Validators.required),
dob: new FormControl('', Validators.required),
currentAddress: new FormGroup({
currAddress: new FormControl('', Validators.required),
landlordName: new FormControl(''),
addressCont: new FormControl(''),
landlordPhone: new FormControl(''),
currCity: new FormControl('', Validators.required),
currAmount: new FormControl(''),
currState: new FormControl('', Validators.required),
currPeriod: new FormControl(''),
currCode: new FormControl('', Validators.required),
currMoveIn: new FormControl(''),
currRent: new FormControl(''),
currMoveOut: new FormControl('')
}),
previousAddress: new FormGroup({
prevAddress: new FormControl(''),
prevLandlordName: new FormControl(''),
prevCont: new FormControl(''),
prevLandlordPhone: new FormControl(''),
prevCity: new FormControl('', Validators.required),
prevAmount: new FormControl(''),
prevState: new FormControl('', Validators.required),
prevPeriod: new FormControl(''),
prevCode: new FormControl('', Validators.required),
prevMoveIn: new FormControl(''),
prevRent: new FormControl(''),
prevMoveOut: new FormControl('')
})
});
return personalDetailsGroup;
}
asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
I have implemented reactive forms my form.valid is not getting updated even after filling the required fields. My form.valid is false even after filling all the required fields. But the form.value is getting update properly but same with both form.valid and form.invalid flags are not getting updated
UI looks like this
<div class="form-feilds">
<div class="form-content">
<form [formGroup]="personalInfo" (ngSubmit)="onSubmit()">
<div formArrayName="details" *ngFor="let field of personalInfo.controls.details['controls']; let index = index;" style="padding-left: 0px; padding-right: 0px;">
<div class="row formgroup1" [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4 first-form">
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">First Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="firstName">
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<label class="pull-right">Full Middle Name*</label>
</div>
<div class="col-md-5 col-sm-3 col-xs-3 col-lg-5">
<input type="text" class="form-control" formControlName="fullMiddleName">
</div>
<div class="col-md-2 col-sm-2 col-xs-2 col-lg-2" style="margin-top: 9px;">
<label class="switch">
<input type="checkbox" formControlName="none">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="row margin">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Last Name*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="lastName">
</div>
</div>
<div class="row margin">
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-right: 0px;">
<label class="pull-right">Suffix</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="suffix">
<option>Ms.</option>
<option>Mrs.</option>
<option>Mr.</option>
</select>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding-left: 0px;padding-right: 0px;">
<label class="pull-right">Gender*</label>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<select class="form-control" id="exampleFormControlSelect1" formControlName="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Maiden Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="maidenName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License #</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="licenseNumber">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Driver License State</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="licenseState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Home Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="homePhone">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">Mobile Phone*</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="mobile">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<label class="pull-right">SSN/SIN</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<input type="text" class="form-control" formControlName="ssn">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6"><label class="pull-right">Date of Birth*</label></div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<div class="input-group">
<input class="form-control text-color" name="dp" ngbDatepicker #dob="ngbDatepicker" formControlName="dob">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="dob.toggle()" type="button"><i class="fa fa-calendar-o"
aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="currentAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Current Address*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="addressCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currRent">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="landlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="currAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="currPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveIn" ngbDatepicker #currMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="currMoveOut" ngbDatepicker #currMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="currMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
<div class="line" *ngIf=" tabIndex === index"></div>
<div [formGroupName]="index" *ngIf=" tabIndex === index">
<div class="row formgroup2" formGroupName="previousAddress">
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Previous Address</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAddress">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Address Cont.</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCont">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">City*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCity">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">State*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevState">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Zip/Postal Code*</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevCode">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent or Own ?</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevRent">
<option>Rent</option>
<option>Own</option>
</select>
</div>
</div>
</div>
<div class="col-md-5 col-xs-5 col-sm-5 col-lg-5">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Name</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordName">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Landlord Phone</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevLandlordPhone">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Amount</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<input type="text" class="form-control" formControlName="prevAmount">
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Rent Period</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<select class="form-control" id="exampleFormControlSelect1" formControlName="prevPeriod">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move in date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveIn" ngbDatepicker #prevMoveIn="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveIn.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
<label class="pull-right">Move Out Date</label>
</div>
<div class="col-md-7 col-sm-7 col-xs-7 col-lg-7">
<div class="form-group calender-width">
<div class="input-group">
<input class="form-control text-color" name="dp" formControlName="prevMoveOut" ngbDatepicker #prevMoveOut="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary text-color" (click)="prevMoveOut.toggle()" type="button"><i
class="fa fa-calendar-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-md-1 offset-sm-1 offset-xs-1 offset-lg-1">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
constructor(private fb: FormBuilder, private router: Router, public shared: SharedServiceService) {
this.shared.headingText = 'Personal Information';
this.tabs.push({ title: 'Primary Applicant', id: this.tabsCount });
this.personalInfo = this.fb.group({
details: this.fb.array([this.createFormControls()])
});
this.shared.personalInfoFormDetails = this.personalInfo;}
createFormControls() {
const personalDetailsGroup = this.fb.group({
firstName: new FormControl('', Validators.required),
maidenName: new FormControl(''),
homePhone: new FormControl(''),
fullMiddleName: new FormControl('', Validators.required),
none: new FormControl(''),
licenseNumber: new FormControl(''),
mobile: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
licenseState: new FormControl(''),
ssn: new FormControl(''),
suffix: new FormControl(''),
gender: new FormControl('', Validators.required),
dob: new FormControl('', Validators.required),
currentAddress: new FormGroup({
currAddress: new FormControl('', Validators.required),
landlordName: new FormControl(''),
addressCont: new FormControl(''),
landlordPhone: new FormControl(''),
currCity: new FormControl('', Validators.required),
currAmount: new FormControl(''),
currState: new FormControl('', Validators.required),
currPeriod: new FormControl(''),
currCode: new FormControl('', Validators.required),
currMoveIn: new FormControl(''),
currRent: new FormControl(''),
currMoveOut: new FormControl('')
}),
previousAddress: new FormGroup({
prevAddress: new FormControl(''),
prevLandlordName: new FormControl(''),
prevCont: new FormControl(''),
prevLandlordPhone: new FormControl(''),
prevCity: new FormControl('', Validators.required),
prevAmount: new FormControl(''),
prevState: new FormControl('', Validators.required),
prevPeriod: new FormControl(''),
prevCode: new FormControl('', Validators.required),
prevMoveIn: new FormControl(''),
prevRent: new FormControl(''),
prevMoveOut: new FormControl('')
})
});
return personalDetailsGroup;
}
asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
edited Jan 4 at 10:29
Balaji Venkateswaran
asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
asked Jan 4 at 9:49
Balaji VenkateswaranBalaji Venkateswaran
34
34
that is becausecurrentAddressandpreviousAddresssub-controls have required fields and you need to supply those
– John Velasquez
Jan 4 at 9:56
Hi @JohnVelasquez I have updated the code in updated code there is currentAddress and previousAddress
– Balaji Venkateswaran
Jan 4 at 10:14
why do you have multiple form tags? where it should be only one form tag
– John Velasquez
Jan 4 at 10:26
@JohnVelasquez there only form tag but multiple formgroupname becasue they are different formarray is used because in application the form is dynamic
– Balaji Venkateswaran
Jan 4 at 10:31
then you should group also those controls which are not related tocurrentAddressandpreviousAddress, example:info: new FormGroup({firstName, maidenName,homePhone ......})so that it would not affect the validation of the other formgroups
– John Velasquez
Jan 4 at 10:36
|
show 2 more comments
that is becausecurrentAddressandpreviousAddresssub-controls have required fields and you need to supply those
– John Velasquez
Jan 4 at 9:56
Hi @JohnVelasquez I have updated the code in updated code there is currentAddress and previousAddress
– Balaji Venkateswaran
Jan 4 at 10:14
why do you have multiple form tags? where it should be only one form tag
– John Velasquez
Jan 4 at 10:26
@JohnVelasquez there only form tag but multiple formgroupname becasue they are different formarray is used because in application the form is dynamic
– Balaji Venkateswaran
Jan 4 at 10:31
then you should group also those controls which are not related tocurrentAddressandpreviousAddress, example:info: new FormGroup({firstName, maidenName,homePhone ......})so that it would not affect the validation of the other formgroups
– John Velasquez
Jan 4 at 10:36
that is because
currentAddress and previousAddress sub-controls have required fields and you need to supply those– John Velasquez
Jan 4 at 9:56
that is because
currentAddress and previousAddress sub-controls have required fields and you need to supply those– John Velasquez
Jan 4 at 9:56
Hi @JohnVelasquez I have updated the code in updated code there is currentAddress and previousAddress
– Balaji Venkateswaran
Jan 4 at 10:14
Hi @JohnVelasquez I have updated the code in updated code there is currentAddress and previousAddress
– Balaji Venkateswaran
Jan 4 at 10:14
why do you have multiple form tags? where it should be only one form tag
– John Velasquez
Jan 4 at 10:26
why do you have multiple form tags? where it should be only one form tag
– John Velasquez
Jan 4 at 10:26
@JohnVelasquez there only form tag but multiple formgroupname becasue they are different formarray is used because in application the form is dynamic
– Balaji Venkateswaran
Jan 4 at 10:31
@JohnVelasquez there only form tag but multiple formgroupname becasue they are different formarray is used because in application the form is dynamic
– Balaji Venkateswaran
Jan 4 at 10:31
then you should group also those controls which are not related to
currentAddress and previousAddress, example: info: new FormGroup({firstName, maidenName,homePhone ......}) so that it would not affect the validation of the other formgroups– John Velasquez
Jan 4 at 10:36
then you should group also those controls which are not related to
currentAddress and previousAddress, example: info: new FormGroup({firstName, maidenName,homePhone ......}) so that it would not affect the validation of the other formgroups– John Velasquez
Jan 4 at 10:36
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54036486%2fform-valid-is-not-getting-updated-even-though-the-form-is-valid-in-reactive-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54036486%2fform-valid-is-not-getting-updated-even-though-the-form-is-valid-in-reactive-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
that is because
currentAddressandpreviousAddresssub-controls have required fields and you need to supply those– John Velasquez
Jan 4 at 9:56
Hi @JohnVelasquez I have updated the code in updated code there is currentAddress and previousAddress
– Balaji Venkateswaran
Jan 4 at 10:14
why do you have multiple form tags? where it should be only one form tag
– John Velasquez
Jan 4 at 10:26
@JohnVelasquez there only form tag but multiple formgroupname becasue they are different formarray is used because in application the form is dynamic
– Balaji Venkateswaran
Jan 4 at 10:31
then you should group also those controls which are not related to
currentAddressandpreviousAddress, example:info: new FormGroup({firstName, maidenName,homePhone ......})so that it would not affect the validation of the other formgroups– John Velasquez
Jan 4 at 10:36