html 带有验证的Angular 6反应形式（Bootstrap 3类）

Posted 2021-05-10

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>