Блог

У меня есть два компонента (родительский и дочерний компоненты), в родительском компоненте есть переключатели создать, обновить, удалить. Если я выберу опцию создать, элемент идентификатора студента в дочернем компоненте должен быть отключен. И при нажатии опции переключателя создать должен быть запущен вызов внутреннего API для получения идентификатора студента и заполнения значения идентификатора студента в элементе идентификатора студента дочернего компонента.

Не могли бы вы, пожалуйста, помочь в этом.

Спасибо

Родительский компонент

 <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>
 

Я вижу, что вы не используете FormControl для своего дочернего элемента, поэтому вам нужно передать значение в качестве входных данных в свой дочерний компонент. Это значение может быть либо логическим значением, имеющим значение true, если вы хотите отключить дочерний элемент, либо значением null в противном случае, либо значением вашей радиогруппы, и в этом случае бизнес-логика должна быть в дочернем компоненте… первый вариант проще….

Поэтому в вашем родительском элементе есть свойство disableStudentId: boolean, затем, после создания вашей FormGroup …

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

передайте это в качестве входных данных вашему дочернему компоненту …. затем в вашем дочернем компоненте html…

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