CODEWITHSUNDEEP
angularangular-reactive-forms
bob.mazzo
bob.mazzo

Reputation: 5627

Angular 5 Reactive Forms - multiple forms in one view template

My idea is to support multiple forms on one view template, and then show only the one I need accordingly to user interaction.

For starters, I have a HOST node and a LOCATION node - both under one [formGroup] - then I show/hide as needed.

Problem is that my HOST form is ALWAYS showing an INVALID status - even when I touch it. However, my LOCATION form is VALID once I "touch" it. This is the confusing part.

Here's a snippet:

<form class="popup-dialog form-horizontal" [formGroup]="nodeEditForm" (ngSubmit)="updateNode(nodeEditForm.value)"> 

	<!-- LOCATION -->
	<table [hidden]="nodeType != 'Location'" class="table table-bordered location-node">
		<!-- all location form controls here... -->
	</table>

	<!-- HOST -->
	<table [hidden]="nodeType != 'Host'" class="table table-bordered host-node">
		<!-- all location form controls here... -->
	</table>

	<p>Form value: {{ nodeEditForm.value | json }}</p>
	<p>Form status: {{ nodeEditForm.status | json }} &nbsp; Dirty: {{ nodeEditForm.dirty}} &nbsp; Touched: {{ nodeEditForm.touched}}</p>
		
      <!-- SAVE/CANCEL -->
	<div class="buttons">
		<div style="display: inline;" role-required="Admin" edit-access="true">
			<button class="btn btn-primary btn-sm" [disabled]="!nodeEditForm.valid || !nodeEditForm.dirty" (click)="updateNode($event)">
				<span *ngIf="!isUpdating" >SAVE</span>
				<i *ngIf="isUpdating" class="fa fa-spinner fa-spin"></i>
			</button>
		</div>

		<div style="display: inline;">
			<button class="btn btn-primary btn-sm" (click)="clearNode($event)" >Cancel</button>
		</div>            
	</div>
</form>

And in my Angular component:

// OnChanges fired first, this.node will be null
ngOnChanges(changes: SimpleChanges){       
  if(changes["node"] != null){
     this.currPage = 1;
     this.initNode();  // all props get assigned empty default values
     this.initForm();
   }
}

initForm() {            
  let grp = this.getFormData(this.node);

  // ADD GROUP CONTROLS FOR FORM !!
  this.nodeEditForm = this.nodeFormBldr.group(grp);

  return;
}

// Assign node properties to form controls; properties initialized in initNode()
  getFormData(node: INode) {

    //this.editXml(); // TO DO     

    return {        
      LocationName: [this.node.LocationName : '', Validators.required],
      LocationType: [this.node.LocationType],
      Address1: [this.node.Address1],
      Address2: [this.node.Address2],
      City: [this.node.City],
      State: [this.node.State],
      Country: [this.node.Country],
      ZipCode: [this.node.ZipCode],
      Phone: [this.node.Phone],
      Email: [this.node.Email],

      ApplicationRoot: [this.hostNode.ApplicationRoot],
      DefaultHostStorage: [this.hostNode.DefaultHostStorage],
      HostName: [this.hostNode.HostName],
      HostIp: [this.hostNode.HostIP],
      IsActive: [this.hostNode.IsActive],        
      XmlData: [this.hostNode.xmlConfig]
    }    
  }

Upvotes: 2

Views: 1520

Answers (1)

enf0rcer
enf0rcer

Reputation: 555

I bet your HostName form doesn't set the LocationName field. And thus its always invalid as you have Validators.required set for the LocationName.

Upvotes: 1

Related Questions