Question

我正在使用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>

Answer 1

与其使用两种不同的形式，不如使用嵌套。

了解更多 here, written by the awesome guru Alexey Zuev

所以基本上只提供子组件：

@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>

在Angular 7中执行嵌套表单或嵌套表单组件的表单验证？

2 个答案: