References:
https://alligator.io/angular/reactive-forms-introduction/
http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example
import { ToastService } from 'Services/toast.service';
import { Component, OnInit, OnChanges, Input, ViewChild, Output, EventEmitter, SimpleChanges, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CaseActionService } from 'App/services/case-status.service';
@Component({
selector: 'v-case-action',
templateUrl: './case-action.component.html',
styleUrls: [ './case-action.component.scss' ],
})
export class CaseActionComponent implements OnInit {
myForm: FormGroup;
state = {
case_id: null,
};
constructor(
private toastService: ToastService,
private caseActionService: CaseActionService,
private fb: FormBuilder
) {
}
ngOnInit(): void {
this.myForm = this.fb.group({
remarks: ['', Validators.required],
});
}
onSubmit(form: FormGroup) {
const remarks = form.value.remarks;
// stop if form invalid
if (this.myForm.invalid) {
return;
}
this.rejectCase(remarks);
}
rejectCase(remarks) {
this.caseActionService.reject(this.state.case_id, remarks)
.pipe(finalize(() => console.log(1)))
.subscribe(
res => {
console.log(res);
this.toastService.show('success', { title: 'Success Reject Rcu Case' });
},
err => {
console.log('err', err);
this.toastService.show('error', { title: 'Error Reject Rcu Case' });
});
}
}
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
<h4 class="">Action Remarks</h4>
<div class="form-group" [ngClass]="{ 'has-error has-feedback': myForm.get('remarks').touched && myForm.get('remarks').invalid }">
<label class="control-label">
<h6>Remarks <span>*</span></h6>
</label>
<textarea formControlName="remarks" class="form-control" rows="10"></textarea>
<span *ngIf="myForm.get('remarks').touched && myForm.get('remarks').hasError('required')" class="help-block">Please provide a remarks!</span>
</div>
<button type="submit" [disabled]="myForm.invalid" class="btn btn-primary">Submit</button>
</form>