Угловой 7 - выполнить проверку формы вложенной формы или компонента вложенной формы?

Question

Я использую Угловые 7 и управляемые шаблоном формы .У меня есть угловая форма в той форме, которую я называю другим компонентом (или формой), и там я также применил обязательные и проверки на основе шаблона .

Другая форма содержит Department Name и mandatory при создании Student.Когда все обязательные поля заполнены, только я хочу включить кнопку save().Но так как поле «Имя отдела» находится в другом компоненте, как я буду проверять, заполнено ли это поле, и теперь мне нужно активировать кнопку?

Пожалуйста, дайте мне знать, если нужна какая-либо информация.

<div>
    <form novalidate #f=ngForm>
        <div style="position: relative;">
            <div class="awr-input">
                <label class="awr-inputbox-label">
                    Owner Name
                    <span class="awr-required">
                        <span aria-hidden="true">
                            *
                        </span>
                    </span>
                </label>
                <app-dept (selectedElement)=populateDepartment($event) [employeeName]=(student.studentName)></app-dept>
            </div>
        </div>
        .....
        .....
        .....
        <div class="fixed-bottom footer">
            <div class="awr-container">
                <div class="awr-row">
                    <div class="awr-col-12">
                        <div class="btn-group-2 float-right">
                            <div class="awr-cta float-right">
                                <div class="cta-with-icon">
                                    <button type="submit" class="awr-btn awr-btn-primary" title="Submit" aria-label="Save" (click)="saveStudent()" [disabled]="!f.form.valid">
                                        Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>    
    </form>
</div>

dept.component.html

<form novalidate #f1=ngForm>
    <div class="input-container">
        <input type="text" id="" class="input-box" aria-required="true" minlength="0" maxlength="100" autocomplete="off"
            width="0" min="" max="" step="" [(ngModel)]="inputField" name="inputField" (input)=getDept() required
            #deptName="ngModel">
    </div>

    <div class="input-flydown flydownStyle" *ngIf="deptList?.length > 0">
        <div>
            <dl *ngFor="let dept of deptList">
                <dt><a class="dxp-cta-link" (click)="sendDept(dept)">{{dept.name}}</a>
                </dt>
                <dd>{{dept.eId}} {{dept.jobTitle}}</dd>
            </dl>
        </div>
        <div *ngIf="deptName.invalid && (deptName.dirty || deptName.touched)" class="dxp-error dxp-required">
            Dept Name is mandatory.
        </div>
    </div>
</form>

Answer 1

Вместо двух разных форм, просто используйте вложенность.

Подробнее здесь, написано потрясающим гуру Алексеем Зуевым

Так что в основном просто укажите в дочернем компоненте:

@Component({
  // ...
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})

и в дочернем шаблоне просто удалите теги формы.Родитель будет знать об этой дочерней форме и о том, когда элементы управления формой в дочернем элементе действительны.

DEMO с сокращенной версией вашего кода: STACKBLITZ

Answer 2

Я думаю, что самая простая форма достижения этой цели - использовать ViewChild.Вы можете ссылаться на компонент с помощью templateRef, а затем проверить, чтобы увидеть значения этого элемента.

@ViewChild('appDept') appDept: DepartmentComponent;

// do/check stuff with this.appDept

<app-dept (selectedElement)=populateDepartment($event) [employeeName]=(student.studentName) #appDept></app-dept>