Проверка не работает во вложенной шаблонной угловой форме - PullRequest
0 голосов
/ 01 октября 2019

Я использую простую форму, как показано ниже. Он имеет несколько текстовых полей и кнопку отправки внизу. Внизу формы непосредственно перед кнопкой отправки находится маршрутизатор <app-test></app-test>, который показывает несколько других вопросов в другом компоненте.

Кнопка подтверждения имеет подтверждение, что если текстовые поля не заполнены, кнопка будет отключена. Эта проверка отлично работает для вопросов, которые присутствуют в форме, но не для вопросов, которые присутствуют в другом компоненте маршрутизатора, даже если маршрутизатор находится между тегами <form> ... </form>. Пожалуйста, помогите, как это исправить.

    <form #="ngForm" (ngSubmit) = "onSubmit(myForm.value); myForm.reset()" *ngIf="!isLoading">

      <div class="form-group">
        <div class="form-group" style="margin-bottom: 0">

          <div class ="form-group col-md-6">
            <label>First Name</label>
            <input type="text" class="form-control" placeholder="Provide your first name" name="FirstName" [(ngModel)]="FirstName"
                   required #username = "ngModel">
          </div>

          <div class ="form-group col-md-6">
            <label>Last Name</label>
            <input type="text" class="form-control" placeholder="Provide your last name" name="LastName" [(ngModel)]="LastName"
                   required #username = "ngModel">
          </div>
        </div>
<app-test></app-test>
        <div align="center" class ="form-group">
          <input type="submit" class="btn btn-primary"
                 [disabled]="!myForm.valid">
        </div>
      </div> 
</form>

Код в маршрутизаторе, как показано ниже: (<app-test></app-test>)

    <div class="form-group">
  <div class ="form-group col-md-6">
    <label>test 1 question?</label>
    <input type="text" class="form-control"  name="test1" [(ngModel)]="test1"
           required #quest1 = "ngModel">

  </div>

  <div class ="form-group col-md-6">
    <label>test2 question ?</label>
    <input type="text" class="form-control" name="test2" [(ngModel)]="test2"
           required #quest2 = "ngModel">

  </div>
</div>

Таким образом, кнопка отправки остается отключенной, когда поля First Name,Last Name не заполнены, но не отключаются, если test 1 question? и test 2 question? не заполнены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...