ng-model/iframe.html

## iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>iframe Window</title>
    <style>
        body {
            background-color: #D53C2F;
            color: white;
        }
    </style>
</head>
<body>
  <div class="container mt-5">
  <div class="card" *ngIf="signIn && !pay">
    <div class="card-header bg-dark">
      <h4 class="m-b-0 text-white"> Login</h4>
    </div>
    <!-- <form> -->
    <div class="form-body">
      <div class="card-body">
        <div class="form-group">
          <label for="userName">User Name</label>
          <input type="text" class="form-control" id="userName" value="USbtYifDREjQsDdAtUcHFHZ8" autocomplete="off"
            placeholder="User Name">
        </div>
        <div class="form-group">
          <label for="inputPassword">Password</label>
          <input type="password" class="form-control" id="inputPassword" autocomplete="off" value="a590a37d-832c-4ecb-bf03-de4c957bf648"
            placeholder="Password">
        </div>
        <div class="footer float-right mb-3">
          <button (click)="logIn()" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
    <!-- </form> -->
  </div>
  <div class="card" *ngIf="pay && !signIn">
    <div class="card-header bg-dark">
      <h4 class="m-b-0 text-white"> Payout</h4>
    </div>
    <!-- <form [formGroup]="payoutForm" (ngSubmit)="payout()"> -->
    <form>
      <div class="form-body">
        <div class="card-body">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" value="test" autocomplete="off" placeholder="Name">
          </div>
          <div class="row">
            <div class="form-group col-md-8">
              <label for="inputCard">Card Number</label>
              <input type="text" class="form-control" id="inputCard" value="4957030420210454" autocomplete="off"
                minlength="15" maxlength="16" placeholder="4111 1111 1111 111">
            </div>
            <div class="form-group col-md-4">
              <label for="cvv">CVV</label>
              <input type="text" class="form-control" id="cvv" autocomplete="off" value="112" minlength="3" maxlength="4"
                placeholder="578">
            </div>
          </div>

          <div class="row">
            <div class="form-group col-md-4">
              <label for="month">Month</label>
              <input type="text" class="form-control" id="month" value="12" autocomplete="off" minlength="2" maxlength="2"
                placeholder="12">
            </div>
            <div class="form-group col-md-4">
              <label for="year">Year</label>
              <input type="text" class="form-control" id="year" value="2020" autocomplete="off" minlength="4" maxlength="4"
                placeholder="2022">
            </div>


            <div class="form-group col-md-4">
              <label for="zip">Zip</label>
              <input type="text" class="form-control" id="zip" value="94114" autocomplete="off" placeholder="04106">
            </div>
          </div>
          <div class="footer float-right mb-3">
            <button type="submit" id="message_button" class="btn btn-primary">Submit</button>
            <!-- <button type="submit" [disabled]="payoutForm.pristine || payoutForm.invalid" (click)="payout()" class="btn btn-primary">Submit</button> -->
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
  <div id="results"></div>
<script>
        // addEventListener support for IE8
        function bindEvent(element, eventName, eventHandler) {
            if (element.addEventListener) {
                element.addEventListener(eventName, eventHandler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, eventHandler);
            }
        }
        // Send a message to the parent
        var sendMessage = function (msg) {
            // Make sure you are sending a string, and to stringify JSON
            window.parent.postMessage(msg, '*');
        };
        var results = document.getElementById('results'),
            messageButton = document.getElementById('message_button');
        // Listen to messages from parent window
        bindEvent(window, 'message', function (e) {
            results.innerHTML = e.data;
        });
        // Send random message data on every button click
        bindEvent(messageButton, 'click', function (e) {
            var random = Math.random();
            sendMessage('' + random);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>iframe Window</title>
	<style>
	body {
	background-color: #D53C2F;
	color: white;
	}
	</style>
	</head>
	<body>
	<div class="container mt-5">
	<div class="card" *ngIf="signIn && !pay">
	<div class="card-header bg-dark">
	<h4 class="m-b-0 text-white"> Login</h4>
	</div>
	<!-- <form> -->
	<div class="form-body">
	<div class="card-body">
	<div class="form-group">
	<label for="userName">User Name</label>
	<input type="text" class="form-control" id="userName" value="USbtYifDREjQsDdAtUcHFHZ8" autocomplete="off"
	placeholder="User Name">
	</div>
	<div class="form-group">
	<label for="inputPassword">Password</label>
	<input type="password" class="form-control" id="inputPassword" autocomplete="off" value="a590a37d-832c-4ecb-bf03-de4c957bf648"
	placeholder="Password">
	</div>
	<div class="footer float-right mb-3">
	<button (click)="logIn()" class="btn btn-primary">Submit</button>
	</div>
	</div>
	</div>
	<!-- </form> -->
	</div>
	<div class="card" *ngIf="pay && !signIn">
	<div class="card-header bg-dark">
	<h4 class="m-b-0 text-white"> Payout</h4>
	</div>
	<!-- <form [formGroup]="payoutForm" (ngSubmit)="payout()"> -->
	<form>
	<div class="form-body">
	<div class="card-body">
	<div class="form-group">
	<label for="name">Name</label>
	<input type="text" class="form-control" id="name" value="test" autocomplete="off" placeholder="Name">
	</div>
	<div class="row">
	<div class="form-group col-md-8">
	<label for="inputCard">Card Number</label>
	<input type="text" class="form-control" id="inputCard" value="4957030420210454" autocomplete="off"
	minlength="15" maxlength="16" placeholder="4111 1111 1111 111">
	</div>
	<div class="form-group col-md-4">
	<label for="cvv">CVV</label>
	<input type="text" class="form-control" id="cvv" autocomplete="off" value="112" minlength="3" maxlength="4"
	placeholder="578">
	</div>
	</div>

	<div class="row">
	<div class="form-group col-md-4">
	<label for="month">Month</label>
	<input type="text" class="form-control" id="month" value="12" autocomplete="off" minlength="2" maxlength="2"
	placeholder="12">
	</div>
	<div class="form-group col-md-4">
	<label for="year">Year</label>
	<input type="text" class="form-control" id="year" value="2020" autocomplete="off" minlength="4" maxlength="4"
	placeholder="2022">
	</div>


	<div class="form-group col-md-4">
	<label for="zip">Zip</label>
	<input type="text" class="form-control" id="zip" value="94114" autocomplete="off" placeholder="04106">
	</div>
	</div>
	<div class="footer float-right mb-3">
	<button type="submit" id="message_button" class="btn btn-primary">Submit</button>
	<!-- <button type="submit" [disabled]="payoutForm.pristine \|\| payoutForm.invalid" (click)="payout()" class="btn btn-primary">Submit</button> -->
	</div>
	</div>
	</div>
	</form>
	</div>
	</div>
	<div id="results"></div>
	<script>
	// addEventListener support for IE8
	function bindEvent(element, eventName, eventHandler) {
	if (element.addEventListener) {
	element.addEventListener(eventName, eventHandler, false);
	} else if (element.attachEvent) {
	element.attachEvent('on' + eventName, eventHandler);
	}
	}
	// Send a message to the parent
	var sendMessage = function (msg) {
	// Make sure you are sending a string, and to stringify JSON
	window.parent.postMessage(msg, '*');
	};
	var results = document.getElementById('results'),
	messageButton = document.getElementById('message_button');
	// Listen to messages from parent window
	bindEvent(window, 'message', function (e) {
	results.innerHTML = e.data;
	});
	// Send random message data on every button click
	bindEvent(messageButton, 'click', function (e) {
	var random = Math.random();
	sendMessage('' + random);
	});
	</script>
	</body>
	</html>