сосредоточиться на текстовой области, которые отображают сообщение об ошибке - PullRequest
Новая
       24

сосредоточиться на текстовой области, которые отображают сообщение об ошибке

0 голосов
/ 25 июня 2019

У меня есть номер textarea, отображаемый с помощью forloop, а также проверил, содержит ли textarea минимальное количество слов, которое требуется. Сообщение об ошибке отображается, если текстовое поле не содержит минимальное количество слов. Как я могу сосредоточиться на текстовом поле, которое отображает ошибку

Я использую угловой 2

HTML 

 <span *ngSwitchCase="'fileupload_with_textarea'">
               <textarea  autosize [value]='question.value'  class="form-control"    max-word-count maxlen=
               {{question.word_details.maximum_word}} minlen=
               {{question.word_details.minimum_word}}  [formControlName]="question.key"  [id]="question.key" (blur)="focusOutSave(question)" #message></textarea>
                <div class="alert alert-danger" *ngIf="question.controlType == 'fileupload_with_textarea' && page_submit && !form.controls[question.key].valid && form.controls[question.key].touched">You didn't enter the answer.</div>
            </span>

компонент 

import { Component, Input, Output, OnInit, Directive,AfterViewInit, EventEmitter, ViewChild ,ViewChildren ,ElementRef ,ChangeDetectorRef, HostListener}  from '@angular/core';


@Component({
    selector: 'dynamic-form',
    templateUrl: './dynamic-form.component.html',
    providers: [ QuestionControlService, SweetAlertService],
    styles: [
    `
      :host >>> .tooltip-inner {
        background-color: #f88f5a;
        color: #fff;
        font-weight: bold;
        padding: 5px;
      }
      :host >>> .tooltip.top .tooltip-arrow:before,
      :host >>> .tooltip.top .tooltip-arrow {
        border-top-color: #f88f5a;
      }
    `
  ]
 })


export class DynamicFormComponent implements OnInit {

    @Input() questions: QuestionBase<any>[] = [];

    @Input() input_params: any;
    @Input() other_vars:any;


    @Input() question_loading_status:boolean;
    @Output() outputEvent:EventEmitter<QuestionBase<any>[]>=new EventEmitter();


    @Input() enrolment_detail_id: number;
    @Output() getQuestions  = new EventEmitter();
    @ViewChild('message') public message: ElementRef;


//onsubmit
 if (this.form.controls[question.key]['wordCt'] != undefined) { 
                if(this.form.controls[question.key]['wordCt'].wordFlag == false && wordCountFlag){
                    wordCountFlag = 0;
                    this.message.nativeElement.focus();
                }
                }

1 Ответ

1 голос
/ 25 июня 2019

Вы можете использовать ElementRef, чтобы получить ссылку на HTML-элемент hative, и использовать его метод focus ().

В вашем компоненте шаблона: 

<textarea
   #messageInput
></textarea>

ваш компонент: 

@ViewChild('messageInput') public messageInput: ElementRef;

В своем коде проверки вы можете вызвать собственный метод фокусировки для текстовой области следующим образом: 

this.messageInput.nativeElement.focus();
...