Created
July 25, 2020 07:46
-
-
Save afifalfiano/ceccdf08fdac606e65f2b41aec5d7d3f to your computer and use it in GitHub Desktop.
After configuration reactive form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="row"> | |
<div class="col-xs-12 mx-auto"> | |
<h1 class="display-4 text-center">Reactive Form Angular</h1> | |
<form [formGroup]="myForm" (ngSubmit)="onSubmit()"> | |
<div class="form-group"> | |
<label for="nama">Nama</label> | |
<input type="text" class="form-control" id="nama" formControlName="nama"> | |
<span class="text-danger" *ngIf="!myForm.get('nama').valid && myForm.get('nama').touched">Nama wajib diisi!</span> | |
</div> | |
<div class="form-group"> | |
<label for="email">Email</label> | |
<input type="text" class="form-control" id="email" formControlName="email"> | |
<span class="text-danger" *ngIf="!myForm.get('email').valid && myForm.get('email').touched">Email belum valid!</span> | |
</div> | |
<div class="form-group"> | |
<label for="telepon">Telepon</label> | |
<input type="text" class="form-control" id="telepon" formControlName="telepon"> | |
<span class="text-danger" *ngIf="!myForm.get('telepon').valid && myForm.get('telepon').touched">Nomer Telpon harus angka!</span> | |
</div> | |
<div class="form-group"> | |
<label for="email">Keterangan</label> | |
<textarea formControlName="keterangan" name="keterangan" id="keterangan" class="form-control" rows="3"></textarea> | |
<span class="text-danger" *ngIf="!myForm.get('keterangan').valid && myForm.get('keterangan').touched">Keterangan harus diisi!</span> | |
</div> | |
<button type="submit" class="btn btn-success" [disabled]="!myForm.valid">Simpan</button> | |
<button type="button" class="btn btn-danger" (click)="onResetForm()">Reset</button> | |
</form> | |
<div class="col-xs-12 mt-4" *ngIf="submitted"> | |
<h3 class="h3">Tampilan Data</h3> | |
<p>Nama: {{ nama }}</p> | |
<p>Email: {{ email }}</p> | |
<p>Telepon: {{ telepon }}</p> | |
<p>Keterangan: {{ keterangan }}</p> | |
</div> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment