machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding form validators for donation form.

Browse Source
This commit is contained in:
softsimon 2020-10-26 23:23:08 +07:00
parent 018e95e648
commit 6a8deff706
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/about/about.component.html
View File

@ -73,14 +73,16 @@
</div> </div>
<input formControlName="amount" class="form-control" type="number" min="0.001" step="1E-03"> <input formControlName="amount" class="form-control" type="number" min="0.001" step="1E-03">
</div> </div>
<div class="input-group mb-4" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount"> <div class="input-group" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount">
<div class="input-group-prepend" style="width: 42px;"> <div class="input-group-prepend" style="width: 42px;">
<span class="input-group-text">@</span> <span class="input-group-text">@</span>
</div> </div>
<input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)"> <input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
</div> </div>
<div class="input-group"> <div class="required" *ngIf="donationForm.get('amount').hasError('required')">Amount required</div>
<button class="btn btn-primary mx-auto" type="submit">Request invoice</button> <div class="required" *ngIf="donationForm.get('amount').hasError('min')">Minimum amount is 0.001 BTC</div>
<div class="input-group mt-4">
<button class="btn btn-primary mx-auto" type="submit" [disabled]="donationForm.invalid">Request invoice</button>
</div> </div>
</form> </form>
</div> </div>

6
frontend/src/app/components/about/about.component.scss
View File

@ -27,3 +27,9 @@
.info-group { .info-group {
max-width: 400px; max-width: 400px;
} }
.required {
color: #FF0000;
font-weight: bold;
}

4
frontend/src/app/components/about/about.component.ts
View File

@ -3,7 +3,7 @@ import { WebsocketService } from '../../services/websocket.service';
import { SeoService } from 'src/app/services/seo.service'; import { SeoService } from 'src/app/services/seo.service';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiService } from 'src/app/services/api.service'; import { ApiService } from 'src/app/services/api.service';
import { env } from '../../app.constants'; import { env } from '../../app.constants';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@ -39,7 +39,7 @@ export class AboutComponent implements OnInit {
this.websocketService.want(['blocks']); this.websocketService.want(['blocks']);
this.donationForm = this.formBuilder.group({ this.donationForm = this.formBuilder.group({
amount: [0.01], amount: [0.01, [Validators.min(0.001), Validators.required]],
handle: [''], handle: [''],
}); });