0

我正在使用 Angular 7 和模板驱动表单。我在那个表单中有角度表单，我正在调用另一个组件（或表单），并且在那里我已经应用了 required 和templatedriven validations。

另一种形式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>
4

2 回答 2

1

不要使用两种不同的形式，而是使用嵌套。

在此处阅读更多内容，由令人敬畏的大师 Alexey Zuev 撰写

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

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

并在子模板中删除表单标签。父母会知道这个子表单以及子表单控件何时有效。

带有代码剥离版本的演示：STACKBLITZ

于 2019-09-24T19:04:38.410 回答
0

我认为实现这一点的最简单形式是使用ViewChild. 您可以使用然后检查来引用该组件templateRef以查看该成员的值。

@ViewChild('appDept') appDept: DepartmentComponent;

// do/check stuff with this.appDept

<app-dept (selectedElement)=populateDepartment($event) [employeeName]=(student.studentName) #appDept></app-dept>
于 2019-09-24T17:00:47.290 回答