<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/api-check/7.5.5/api-check.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly/7.3.0/formly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/6.1.5/angular-formly-templates-bootstrap.min.js"></script>
<script>
angular.module('plnkr', ['formly', 'formlyBootstrap'])
.controller('mainController', function($scope) {
this.model = {};
this.fields = [{
key: 'name',
type: 'input',
templateOptions: {
type: 'text',
label: 'Name',
required: true
}
}];
this.busy = false;
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body ng-app="plnkr">
<div class="container" ng-controller="mainController as vm">
<h1>Test</h1>
<h1>Steps to reproduce</h1>
<ol>
<li>Leave the name field blank</li>
<li>Check the busy flag to hide the form</li>
<li>Un-check the busy flag to display the form</li>
</ol>
<h1>Expected result</h1>
<p>The form should contain all its fields and show as invalid</p>
<h1>Actual result</h1>
<p>vm.form continues to refer to the old form that is now blank.</p>
<h1>Form</h1>
<label><input type=checkbox ng-model=vm.busy> Busy</label>
<div ng-if="!vm.busy">
<form name="vm.form1">
<formly-form form="vm.form2" model="vm.model" fields="vm.fields"></formly-form>
</form>
</div>
<div ng-if="vm.busy">
Working...
</div>
<div class=row>
<div class=col-sm-6>
<span class="label label-success" ng-show="vm.form1.$valid">Valid</span>
<span class="label label-danger" ng-show="vm.form1.$invalid">Invalid</span>
<pre>{{vm.form1|json}}</pre>
</div>
<div class=col-sm-6>
<span class="label label-success" ng-show="vm.form2.$valid">Valid</span>
<span class="label label-danger" ng-show="vm.form2.$invalid">Invalid</span>
<pre>{{vm.form2|json}}</pre>
</div>
</div>
</div>
</body>
</html>