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

Я использую Angular 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>

angular angular7 angular-forms angular-formbuilder
person Pra_A    schedule 24.09.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Подробнее написано замечательным гуру Алексей Зуев

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

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

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

ДЕМО с урезанной версией вашего кода: STACKBLITZ

person AJT82    schedule 24.09.2019
comment
Здорово! Рад помочь :) - person AJT82; 25.09.2019
comment
Не могли бы вы помочь мне и здесь: stackoverflow.com/questions/58092282/? - person Pra_A; 25.09.2019

arrow_upward
0
arrow_downward

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

@ViewChild('appDept') appDept: DepartmentComponent;

// do/check stuff with this.appDept

<app-dept (selectedElement)=populateDepartment($event) [employeeName]=(student.studentName) #appDept></app-dept>
person alphapilgrim    schedule 24.09.2019
comment
Как я могу проверить, действительна ли вложенная форма? Как принять решение, чтобы отображалась кнопка сохранения? - person Pra_A; 24.09.2019
comment
Примерно так: this.appDept.formName.valid. Ваше formName или другой шаблон ref в зависимости от того, какая у вас настроена форма. - person alphapilgrim; 24.09.2019
comment
Ссылка на "this.appDept.deptName". Вы просто убедитесь, что у него есть ценность - person alphapilgrim; 24.09.2019
comment
Что мне нужно использовать в моем примере [disabled]="!f.form.valid"? - person Pra_A; 24.09.2019