必填字段验证器不起作用Angular 7反应形式

Question

我尝试实现static int sumRange(int from, const int& to); int Utility::sumRange(int from, const int& to) { int sum = 0; while (from < to) { sum =+ from; ++from; } return sum; } int sum = Utility::sumRange(5,10); 控件的WebsiteUrl字段所需的验证器。在初始表单加载时，我可以看到true的值，即FormArray已打印在UI上。当我尝试清除控件时，该表格仍然有效。我试图禁用保存按钮，并在控件下方显示标签，以突出显示该字段尚未填充。

UI

HTML

form.valid

组件

 <div class="form-group row">
                    <label for="inputEmail" class="col-md-2 col-form-label modal-label ">Websites</label>
                    <div class="col-md-10">
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label style="background-color:#dfdfdf" for="inputEmail">Website URL</label>
                            </div>
                            <div class="col-md-3">
                                <label style="background-color:#dfdfdf" for="inputEmail">User Name</label>
                            </div>
                            <div class="col-md-3">
                                <label style="background-color:#dfdfdf" for="inputEmail">Password</label>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-10 offset-md-2">
                        <div formArrayName="Websites"
                            *ngFor="let item of frmFirm.get('Websites').controls; let i = index; let last = last">
                            <div [formGroupName]="i">

                                <div class="form-group row">
                                    <div class="col-md-4">
                                        <div *ngIf="!EditMode">{{FirmDetails.Websites[i].WebsiteUrl}}</div>
                                        <input *ngIf="EditMode" formControlName="WebsiteUrl" class="form-control  form-control-sm" />
                                        {{frmFirm.valid}}
                                        <label *ngIf="EditMode && !frmFirm.valid" style="color:red" for="inputEmail">Please enter Website URL</label>
                                    </div>
                                    <div class="col-md-3">
                                        <div *ngIf="!EditMode">{{FirmDetails.Websites[i].Username}}</div>
                                        <input *ngIf="EditMode" formControlName="Username" class="form-control  form-control-sm" />
                                    </div>
                                    <div class="col-md-3">
                                        <div *ngIf="!EditMode">{{FirmDetails.Websites[i].Password}}</div>
                                        <input *ngIf="EditMode" formControlName="Password" class="form-control  form-control-sm" />
                                    </div>
                                    <div class="col-md-1" *ngIf="EditMode">
                                        <button style="color: #c45703; border-color: #c45703; padding:1px" class="fa fa-trash" (click)="removeWebsite(i)"></button>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="form-group row" *ngIf="EditMode">
                    <div class="col-md-2 offset-md-2">
                        <button class="btn-firm" type="button" (click)="addWebsite()">Add Website</button>
                    </div>
                </div>
   <div class="btn-toolbar" style="padding-top:40px;">

                <span *ngIf="EditMode"><button [disabled]="!frmFirm.valid" type="submit" class="btn btn-primary btn-view-all btn mr-3">Save</button>

                </span>

Answer 1

使用FormGroup.get(CONTROL)返回一个FormControl实例，您可以使用该实例访问特定值并检查每个控件 例如FormControl.hasError和FormControl.touched 尝试以下代码：

<label 
*ngIf="item.get('WebsiteUrl').hasError('required') && 
       item.get('WebsiteUrl').touched">Please enter Website URL
</label>

在初始Validators.required中也包含websiteGroup可以解决按钮未被禁用的问题

 const websiteGroup = FirmDetails.Websites.map(website => {
           return this._fb.group({
            FirmWebsiteId:    [website.FirmWebsiteId],
            WebsiteUrl: [website.WebsiteUrl, Validators.required],
            Username:   [website.Username],
            Password:   [website.Password],
            FirmId: [website.FirmId]
            });
        });