Как мне преобразовать данные формы из выпадающего списка с несколькими выборками из массива в строку? - PullRequest
Новая
       4

Как мне преобразовать данные формы из выпадающего списка с несколькими выборками из массива в строку?

0 голосов
/ 27 февраля 2019

У меня есть форма, в которой есть поле, которое динамически загружает данные из базы данных в выпадающий список ng-multiselect.Я хочу сохранить данные формы в базе данных, используя почтовый запрос, который не работает.Когда есть все поля ввода текста, он работает нормально.Мое исследование говорит мне, что я должен преобразовать значения ng-multiselect в строку, чтобы это работало.

Component.ts 

export class AssociateDetailsComponent implements OnInit,OnDestroy{
  
  
  //Variable for dropdown multiselect
  str : string;
  //list : Skills[];
  dropdownList = [];
  selectedItems =[];
  dropdownSettings = {};
  readonly rootURL= 'http://localhost:67764/api';
  
  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
  constructor(private associateService: AssociateServiceService,
    private data : DataService, private http : HttpClient) { }
  
    

 

  ngOnInit() {
    this.http.get(this.rootURL+ '/Skills').toPromise()
    .then(res => this.dropdownList = res as Skills[]);

    this.dropdownSettings = {
      singleSelection: false,
      idField: 'SkillsId',
      textField: 'Skill',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 100,
      allowSearchFilter: false
    };
    this.selectedItems = [
      { SkillsId: 3, Skill: 'java' }
    ];

    

    //Shared service for data transfer between forms
    this.AsId=this.data.AsId;
    
    this.associateService.formData={
      Name: '',
      AssociateId: this.AsId,
      Skills:'',
      Hobbies : '',
      Experience : '',

    }

component.html 

postAssociateDetail(formData: Associate){
    //JSON.stringify(formData);
    
    return this.http.post(this.rootURL+'/AssociateDetails',formData);

  }
  
<div class="col s6">
 <div class="row">
   <h3><div class="col s6">Name</div></h3>
   <h3>{{AsId}}</h3>
    </div>
 <div class="container">
 <div class="card">
   <div class="sm-jumbotron center center-align">
     <h2>Please Provide Below Details</h2> 
    </div>
  </div>
     <div class="row">
       <div class="col s12">
         <form #form="ngForm" autocomplete="off" (submit)="OnSubmit(form)">
            <div class="formgroup"> 
                <label data-error="Required field!">AssociateId</label>                 
                <input type="text" placeholder="AssociateId" class="validate" name="AssociateId" #AssociateId="ngModel" [(ngModel)]="associateService.formData.AssociateId" required>
            </div>     
            <div class="formgroup">
                <blockquote>
                    List your skills
                   </blockquote>
                   <ng-multiselect-dropdown
                     name ="Skills"    
                     type="input-field"    
                    [placeholder]="'Skills'"
                    [data]="dropdownList"
                    #Skills="ngModel"
                    [(ngModel)]="associateService.formData.Skills"
                    [settings]="dropdownSettings"
                    >
                  </ng-multiselect-dropdown>                              
                                             
               
            </div>  
            

            <div class="formgroup"> 
                <blockquote>
                   Please enter your interests and hobbies 
                  </blockquote>
                                 
                <input type="text" placeholder="Hobbies" class="validate" name="hobbies" #Hobbies="ngModel" [(ngModel)]="associateService.formData.Hobbies" required>
            </div>
              <div class="formgroup"> 
                  <blockquote>
                     Please share your experiences.
                    </blockquote>
                                     
                  <input type="text" placeholder="Experience" class="validate" name="experience" #Experience="ngModel" [(ngModel)]="associateService.formData.Experience" required>
              </div>
              
                <div class="row">
                  <div class="col s6">
                <div class="formgroup">
                    <button type="submit" class="btn btn-large waves-effect">Submit</button>
                  </div>
                </div>

                <div class="col s6">
                  <div class="formgroup">
                      <button  type="reset" class="btn btn-large waves-effect" (click)="resetForm()">Reset</button>
                    </div>

                  </div>
                  </div>       
         </form>
       </div>
       
     </div>
    </div>
  </div>

Backend

'[HttpPost] public async Task<IActionResult> PostAssociateDetails([FromBody] AssociateDetails associateDetails) { if (!ModelState.IsValid) { return BadRequest(ModelState); } _context.NewAssociateDetails.Add(associateDetails); await _context.SaveChangesAsync(); return CreatedAtAction("GetAssociateDetails", new { id = associateDetails.Id }, associateDetails); }'

'

...