Question

我有Angular形式。它的形式包含具有2个嵌套元素的基本人员数据，并且我无法为嵌套项目设置验证器。
我想要的JSON女巫如下所示：

{
"FirstName": "Tom",
"LastName":"Hanks",
"User": {
     "Username": "TestAdres",
     "EMail": "email@address.com"
},
"Address": {
     "City": "Miami",
     "Street": "Bugatti",
     "ZipCode": "123-123",
     "HouseNumber" : "5b"
}

}

我的ngInit看起来像这样：

ngOnInit(): void {
  this.clientForm = new FormGroup({  
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    user: new FormGroup({      
      email:  new FormControl('', [Validators.required, Validators.minLength(6)])
      }),
    address: new FormGroup({       
      city: new FormControl('', [Validators.required, Validators.minLength(3)]),
      street:  new FormControl('', [Validators.required, Validators.minLength(3)]),
      houseNumber:  new FormControl('', [Validators.required, Validators.minLength(3)]),
      zipCode:  new FormControl('', [Validators.required, Validators.minLength(3)]),
      })
    });
  this.getClient();
}

HTML在这里：

<h2>edit client</h2>
<form [formGroup]="clientForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
            <div *ngIf="f.firstName.errors.required">First Name is required</div>
        </div>
    </div>
    <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
        <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
            <div *ngIf="f.lastName.errors.required">Last Name is required</div>
        </div>
    </div>
    <div class="panel" formGroupName="user">
        <div class="form-group">
            <label for="email">E-mail</label>
            <input type="email" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
            <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                <div *ngIf="f.email.errors.required">Email is required</div>
                <div *ngIf="f.email.errors.minlength">Email must be at least 6 characters</div>
            </div>
        </div>
    </div>
    <div class="panel" formGroupName="address">
        <h3>Adres:</h3>
        <div class="form-group">
            <label for="city">Miejscowosc</label>
            <input type="city" formControlName="city" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.city.errors }" />
            <div *ngIf="submitted && f.city.errors" class="invalid-feedback">
                <div *ngIf="f.city.errors.required">City is required</div>
            </div>
        </div>
        <div class="form-group">
            <label for="street">Ulica</label>
            <input type="street" formControlName="street" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.street.errors }" />
            <div *ngIf="submitted && f.street.errors" class="invalid-feedback">
                <div *ngIf="f.street.errors.required">Street is required</div>
            </div>
        </div>
        <div class="form-group">
            <label for="houseNumber">Nr domu</label>
            <input type="houseNumber" formControlName="houseNumber" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.houseNumber.errors }" />
            <div *ngIf="submitted && f.houseNumber.errors" class="invalid-feedback">
                <div *ngIf="f.houseNumber.errors.required">houseNumber is required</div>
            </div>
        </div>
        <div class="form-group">
            <label for="zipCode">Kod pocztowy</label>
            <input type="zipCode" formControlName="zipCode" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.zipCode.errors }" />
            <div *ngIf="submitted && f.zipCode.errors" class="invalid-feedback">
                <div *ngIf="f.zipCode.errors.required">Zip code is required</div>
            </div>
        </div>

    </div>
    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">
            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
            Apply
        </button>
        <button type="button" (click)="generatePass()" [disabled]="loading" class="btn btn-link">
            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
            Generate new password
        </button>
        <a routerLink="" class="btn btn-link">Cancel</a>
    </div>
   
</form>

我在验证方面遇到问题。嵌套控件没有“错误”属性。对于姓和名，我的代码可以正常工作。我用这个问题工作了3天，我不知道该怎么做。

谢谢！

Answer 1

错误Cannot read property 'errors' of undefined表示address和user属性在您在[ngClass]语句中使用之前尚未初始化。

几乎没有解决方案：

您可以尝试将ngOnInit移至组件构造函数。
在?.语句check docs

[ngClass]

在构造函数中准备空的f对象，所有字段均为空，然后填充它们。嘲笑this answer

Answer 2

解决我的问题的示例在这里： https://stackblitz.com/edit/angular-xaercd?file=src%2Fapp%2Fapp.component.html 我必须以这种方式引用元素：

tidy.NULL*

感谢大家的帮助

Answer 3

您可以尝试执行以下操作吗？

        <div class="form-group">
            <label for="zipCode">Kod pocztowy</label>
            <input type="zipCode" formControlName="zipCode" class="form-control" [ngClass]="{ 'is-invalid': submitted && form.get('address.zipCode).hasErrors }" />
            <div *ngIf="submitted && form.get('address.zipCode).hasErrors" class="invalid-feedback">
                <div *ngIf="form.get('address.zipCode').hasError('required')">Zip code is required</div>
            </div>
        </div>

无法读取未定义的属性“错误”

3 个答案: