Я внедрил реактивные формы, моя форма не обновляется даже после заполнения обязательных полей.Мой form.valid имеет значение false даже после заполнения всех обязательных полей.Но form.value корректно обновляется, но то же самое с флагами form.valid и form.invalid не обновляются
Пользовательский интерфейс выглядит следующим образом
<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;
}