Я использую простую форму, как показано ниже. Он имеет несколько текстовых полей и кнопку отправки внизу. Внизу формы непосредственно перед кнопкой отправки находится маршрутизатор <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?
не заполнены.