Валидиране на полето за отметка на ъглов материал

Чудя се за начин да потвърдя необходимото квадратче за отметка в същия стил, като ъгловият материал обработва валидирането за други контроли - при подаване на формуляр контролата изглежда червена, освен ако не бъде докосната.

Мисля, че мога да направя това с ng-style, но не мога да измисля начин да проверя дали формулярът е изпратен

Ето фрагмент от HTML

 <form [formGroup]="frmFinish" name="frmFinish">
        <mat-checkbox required formControlName="check1">Discussed Confidentiality and Information Sharing with Service User</mat-checkbox>
        <mat-checkbox required formControlName="check2">Discussed Disposal and Storage of Injecting Equipment and Substances</mat-checkbox>
        <mat-checkbox required formControlName="check3">Discussed Overdose Risk and Prevention</mat-checkbox>

        <mat-form-field>
            <textarea formControlName="note" [(ngModel)]="stepFive.note" matInput placeholder="Any Additional Notes" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"></textarea>
            <mat-hint align="end">This will be added to the profiles note's</mat-hint>
        </mat-form-field>

        <mat-card-actions>
            <button mat-raised-button type="button" class="nav-btn pull-right" (click)="fillForm()" style="background: red">Fill Form</button>
            <button mat-raised-button class="nav-btn pull-right" style="margin-left:5px;" (click)="createProfile()" type="submit">Finish</button>
            <button mat-raised-button matStepperPrevious class="nav-btn pull-right">Previous</button>
        </mat-card-actions>
    </form>

А ето и машинописа:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CreateProfileComponent } from '../create-profile.component';

@Component({
    selector: 'step-five-component',
    templateUrl: './step-five.component.html',
    styleUrls: ['../create-profile.component.css']
})
export class StepFiveComponent {
    frmFinish: FormGroup;

    stepFive = {
        note: null
    };

    constructor(private formBuilder: FormBuilder) {
        this.frmFinish = this.formBuilder.group({});
    }

    ngOnInit() {
        this.frmFinish = this.formBuilder.group({
            note: ['', Validators.required],
            check1: ['', Validators.required],
            check2: ['', Validators.required],
            check3: ['', Validators.required],
        });
    }

    createProfile(){
        if(this.frmFinish.valid){
            console.log('Creating profile..');
        }else{

        }
    }

    fillForm(){
        this.stepFive.note = 'asdasd';
    }

}

person Ben Donnelly    schedule 30.01.2018    source източник


Отговори (2)


"обаче не мога да измисля начин да проверя дали формулярът е изпратен". Можете просто да зададете поле isSubmitted да бъде вярно, когато се извиква createProfile?

  createProfile(){
        this.isSubmitted = true;
        if(this.frmFinish.valid){
            console.log('Creating profile..');
        }else{

        }
    }

След това можете да използвате ngStyle или ngClass:

[ngClass]="{'has-error': checkForError() }"
person trees_are_great    schedule 30.01.2018

Това беше разрешено във версия 2.3.0 на Angular.

Просто използвайте: Validators.requiredTrue вместо Validators.required.

(Вижте GitHub проблем #11459. Вижте Angular документи requiredTrue)

person Lindauson    schedule 28.09.2018
comment
Това е работа, добър отговор - person Inline Instructions.; 05.05.2021