Skip to content

Instantly share code, notes, and snippets.

@afifalfiano
Created July 25, 2020 07:46
Show Gist options
  • Save afifalfiano/ceccdf08fdac606e65f2b41aec5d7d3f to your computer and use it in GitHub Desktop.
Save afifalfiano/ceccdf08fdac606e65f2b41aec5d7d3f to your computer and use it in GitHub Desktop.
After configuration reactive form
<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> &nbsp;
<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