反应性表单:将[class.class-name]指令与嵌套表单组一起使用

时间:2019-04-08 21:24:54

标签: css angular-reactive-forms

我需要将te [class.class-name]指令与嵌套表单组和数组一起使用。

该代码取自另一个问题,但是我的问题是完全相同的。我的代码结构如下。

真正的问题是如何使用 [class.field-error] =“ myForm.controls.address.controls.street.invalid” 没有将整个路径传递给formControl。

类似[class.field-error] =“ formControl.invalid”

<form [formGroup]="myForm" >
   <div class="form-group">
      <label for="fullname">Username</label>
      <input type="text" id="username" formControlName="fullname" class="form-control">            
   </div>
   <div class="radio" *ngFor="let gender of genders">
      <label>
      <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
   </div>
   <div formGroupName="address">
      <div class="form-group">
         <label for="street">Username</label>
         <input type="text" id="username" value="street" formControlName="street" class="form-control" [class.field-error]="myForm.controls.address.controls.street>            
      </div>
      <div class="form-group">
         <label for="houseNumber">Username</label>
         <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
      </div>
      <div class="form-group">
         <label for="postalCode">Username</label>
         <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
      </div>
   </div>
</form>

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

0 个答案:

没有答案