One-to-many UI error generated by the abp suite. #9887

2 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  • The error NG01203: No value accessor for form control name: 'authorId' in your ABP Suite-generated Angular UI typically means the form control is not bound to a compatible Angular Material component (like <mat-select>) or the necessary module is not imported.

  • In a one-to-many navigation (e.g., Book → Author), ABP Suite should generate a dropdown for selecting the related entity (Author) in both the create/edit form and the advanced filter. If this is missing, it is usually due to:

    1. The <mat-select> component is not used for the authorId field.
    2. The MatSelectModule is not imported in your feature or shared module.
    3. The lookup data for authors is not loaded or bound to the dropdown.

  How to Fix:

  1. Ensure <mat-select> is used for authorId:

  <mat-form-field>
       <mat-label>Author</mat-label>
       <mat-select formControlName="authorId" required>
         <mat-option *ngFor="let author of authors" [value]="author.id">
           {{ author.name }}
         </mat-option>
       </mat-select>
     </mat-form-field>
  

  2. Import MatSelectModule in your module:

  import { MatSelectModule } from '@angular/material/select';
  
     @NgModule({
       imports: [
         // ... other imports
         MatSelectModule
       ]
     })
     export class SharedModule { }
  

  3. Load and bind the authors list: In your component:

  authors: AuthorDto[] = [];
  
     ngOnInit() {
       this.authorService.getList().subscribe(result => {
         this.authors = result.items;
       });
     }
  

  4. Advanced Filter Dropdown: Similarly, use <mat-select> for the filter and bind the authors list.

  5. Regenerate Code if Needed: If the ABP Suite did not generate the dropdown, you may need to re-add the navigation property and regenerate, ensuring you select the correct display and filter options.

  References:

  • ABP Book to Author Relation (Suite)
  • Using Angular Material Components With ABP

  This approach aligns with common ABP conventions for one-to-many navigation properties in Angular UI.

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  Jamesreal created 19 hours ago

  I knew how to fix the code generated by apb suite. I hope you can fix apb suite so it generates correct code.

  Save Cancel