验证在formgroup中的Angular 13中的验证中断

Question

我花了最后几个小时在Angular 13中填充了我的表格下拉菜单，最后我设法使其正常工作，尽管在代码中填充下拉列表并不是问题，但其他控件会破坏我的下拉序列：

例如：

@Component({
  selector: 'app-company-add',
  templateUrl: './company-add.component.html',
  styleUrls: ['./company-add.component.css']
})
export class CompanyAddComponent implements OnInit {

 currencies: Currency[] = [];

  form = new FormGroup({
    name: new FormControl('',[Validators.required]),     
    currency: new FormControl('', Validators.required),
    address: new FormGroup({
        street: new FormControl('',[Validators.required]),
        city: new FormControl('',[Validators.required]),
        country: new FormControl('',[Validators.required]),
    })
  });


  constructor( public companyService: CompanyService, public currencyService: CurrencyService,
    private router: Router) {

     }

  ngOnInit() {
    this.currencyService.getAll().subscribe((data: Currency[])=>{
      this.currencies = data;
      console.log(this.currencies);    
    })  
}

  get f(){
    return this.form.controls;
  }
  
  submit(){
    console.log(this.form.value);
    this.companyService.create(this.form.value).subscribe((res:any) => {
      console.log(res);
         console.log('Post created successfully!');
         this.router.navigateByUrl('details');
    })
  }
}

<form [formGroup]="form" (ngSubmit)="submit()">
<div class="row">

    <div class="col">
        <h2>Add new company</h2>
        <label for="name">Name:</label>
        <input formControlName="name" id="name" type="text" class="form-control" style="width: auto;">
        <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">Name is requiered.
            <div *ngIf="f['name'].errors && f['name'].errors['required']">Name is requiered.</div>
        </div>          

        <label for="currency">Currency:</label>
        <select formControlName="currency" class="form-control">
            <option disabled>Select Currency</option>
            <option>Choose Currency</option>
            <option *ngFor="let currency of currencies">{{currency.name}}</option>
        </select>

    </div>

    <div class="col">
        <div formGroupName="address">
            <h2>Address</h2>
            <label for="street">Street:</label>
            <input formControlName="street" id="street" type="text" class="form-control" style="width: auto;">
            <div *ngIf="f['street'].touched && f['street'].invalid" class="alert alert-danger">
                Street is
                required.
                <div *ngIf="f['street'].errors && f['street'].errors['required']">Street is
                    required.</div>
            </div>
            <label for="city">City:</label>
            <input formControlName="city" id="city" type="text" class="form-control" style="width: auto;">
            <div *ngIf="f['city'].touched && f['city'].invalid" class="alert alert-danger">
                City is required.
                <div *ngIf="f['city'].errors && f['city'].errors['required']">City is required.
                </div>
            </div>
            <label for="zipCode">ZipCode:</label>
            <input formControlName="zipCode" id="zipCode" type="text" class="form-control" style="width: auto;">
            <div *ngIf="f['zipCode'].touched && f['zipCode'].invalid" class="alert alert-danger">
                ZipCode is required.
                <div *ngIf="f['zipCode'].errors && f['zipCode'].errors['required']">ZipCode is
                    required.</div>
            </div>

            <label for="country">Country:</label>
            <input formControlName="country" id="country" type="text" class="form-control" style="width: auto;">
            <div *ngIf="f['country'].touched && f['country'].invalid" class="alert alert-danger">
                Country is required.
                <div *ngIf="f['country'].errors && f['country'].errors['required']">Country is
                    required.</div>
            </div>

        </div>
    </div>
</div>
<div class="col">
<button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>

我的下拉列表当我在formGroupName中有验证器=“地址”中的验证器时，是否有空白

会打破下拉列表：

<div *ngIf="f['street'].touched && f['street'].invalid" class="alert alert-danger">
                Street is
                required.
                <div *ngIf="f['street'].errors && f['street'].errors['required']">Street is
                    required.</div>
            </div>

有人建议如何修复它，以便我可以在每个控件上都有验证器？

Answer 1

在您的示例中，f ['Street']是无效的路径，因为街道不是form> form的直接后代。正确的表示法是f ['adversion']。控件['sweet']。

为了进一步改进，我建议您删除get f（），只需使用indend-in-in getter 访问表单控件。这将允许您轻松访问嵌套控件，例如form.get（'resplast.street'）或 form.get（'resplove.city'） 。