Question

我有两个组件（父组件和子组件），在父组件中有单选按钮选项create，update，delete。如果我选择创建选项，则子组件中的学生ID元素应被禁用。然后，单击“创建”单选按钮选项时，应触发后端API调用以获取学生ID，并在子组件Student ID元素中填充学生ID值。

请帮忙。

谢谢

父组件

<mat-card class="student-registration-card" fxLayout="column" fxLayout.lt-sm="column" fxLayoutGap="32px">
  <mat-card fxLayoutAlign="space-evenly stretch">
      <mat-card-content>         
        <div class="student-registration-container">
          <form class="student-reg-container" [formGroup]="options">
            <div>
              <label> Action: </label>
              <mat-radio-group formControlName="floatLabel">
                <mat-radio-button (click)="create()" value="create">Create</mat-radio-button>
                <mat-radio-button (click)="update()" value="update">Update</mat-radio-button>
                <mat-radio-button (click)="delete()" value="delete">Delete</mat-radio-button>
              </mat-radio-group>
            </div>           
          </form>
        </div>      
      </mat-card-content>
  </mat-card>
  <mat-card-content *ngFor="let _ of [1]" fxLayout="column" fxLayout.lt-sm="column" fxLayoutGap="32px">
      <app-basic-details fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%" fxLayoutAlign="space-evenly stretch" [action]="action"></app-basic-details>
      <app-address-details fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%" fxLayoutAlign="space-evenly stretch"></app-address-details>
      <app-guardian-details fxFlex="0 1 calc(33.3% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%" fxLayoutAlign="space-evenly stretch"></app-guardian-details>
  </mat-card-content>
</mat-card>

子组件

<mat-card fxFlex="1000px" fxFlex.xs="100%">
        <!-- Title of an Card -->
        <mat-card-title>
            Student Basic Details
        </mat-card-title>
        <mat-card-content>
            <form>
                <table>
                    <tr>
                        <td>
                            <mat-form-field class="demo-full-width">
                                <input matInput placeholder="Student Id">
                            </mat-form-field>
                        </td>
                        <td>
                            <mat-form-field>
                                <mat-label>Standard</mat-label>
                                <mat-select [(ngModel)]="selectedValue" name="standard">
                                    <mat-option *ngFor="let standard of standards" [value]="standard.value">
                                        {{standard.viewValue}}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </td>

                    </tr>                    
                </table>
            </form>
        </mat-card-content>
    </mat-card>

Answer 1

我看到您没有为childElement使用formControl，因此，您需要将值作为输入传递给childComponent。该值可以是布尔值，如果要禁用子元素，则设置为true；否则为null，也可以是radioGroup的值，在这种情况下，业务逻辑必须位于子组件中。前者比较容易。...

因此，在您的父级中，具有一个属性disableStudentId：boolean，然后在创建FormGroup后...

this.options.floatLabel.valueChanges.subscribe(
    val => this.disableStudentId = val === 'create' ? true : null
);

将此作为输入传递到您的子组件...。然后在您的子组件html ...

<input matInput placeholder="Student Id" [disabled]="disableStudentId">

如何基于其他组件单选按钮选项禁用表单元素

1 个答案: