使用复选框选择多个值并使用 angular 中的 formControlName 将它们发送到数据库 6

Question

我想使用 formControlName 将检查值获取到数据库。

.html 文件；

<form id="student-form" [formGroup]="studentForm" (ngSubmit)="onsave(studentForm.value)"> <div class="container">
<div class="row">      
  <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 col-sm-offset-1 col-md-offset-2 col-lg-offset-3" id="personalDetails">
    <div class="form-group col-lg-12" style="margin:10px 0 20px; padding: 0px">
      <h4 style="text-align:center; padding:15px 0px; background-color:lightgreen; font-weight: bold">Personal Details</h4>
    </div>
    <hr>
    <div class="form-group col-sm-6 col-md-6 col-lg-6 clearfix" style="padding-left: 0px">
      <label for="firstName">First Name</label>
      <input type="text" minlength="4" class="form-control textboxsize" formControlName="StudentFirstName" id="firstName" name="firstName" placeholder="First Name" required>
    </div>
    <!-- <div class="alert alert-danger" *ngIf="firstName.errors?.required && (firstName.dirty || firstName.touched)">
      First name is required.
    </div> -->
    <div class="form-group col-sm-6 col-md-6 col-lg-6 clearfix" style="padding: 0px">
      <label for="familyName">Family Name/ Surname</label>
      <input type="text" class="form-control textboxsize" formControlName="StudentLastName" id="familyName" name="familyName" placeholder="Family Name/ Surname"> </div>  <div class="form-group col-xs-12 clearfix" style="padding: 0px">
      <label for="preferredCountry">Preferred Country</label>
      <br><button type="button" class="btn btn-classic" onclick="tgf()">Select Countries</button><br>
      <div class="col-xs-12 textboxsize" id="cl" style="display: none; border:0.5px solid #E0E0E0; border-radius:3px; margin-top: 5px; padding-left: 15px; max-width: 250px; max-height: 150px; overflow: scroll">

        <div class="checkbox" *ngFor="let country of selectCountries">

          <label>
            <input formControlName="PreferedCountry1" type="checkbox" [checked]="check" value="{{country.CountryID}}">
              {{country.CountryName}}
          </label>
        </div></div></div><div class="form-group col-xs-12" style="text-align:center;margin:5px auto 0px;">
      <div class="col-md-offset-0">
          <input id="btnPrevious" class="btn btn-success" value="Previous" name="btnPrevious" style="width: 100px; font-size: 18px; background-color: #009900;" onclick="myFunction()" />

          &nbsp;
           <!-- Store: [disabled]="F.invalid" -->
          <input id="btnRegister" type="submit" class="btn btn-success" value="Register" name="btnRegister" style="width: 100px; font-size: 18px; background-color: #009900;" />

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

.ts文件；

 studentForm:FormGroup; constructor(private _fb:FormBuilder, private httpService: HttpClient, 
private ser:ApiServiceService) {
this.studentForm = this._fb.group({ // Defining form controls which will be used in html
  "StudentFirstName":['', Validators.required,],
  "StudentLastName": ['', Validators.required,],
  "Contact":['', [Validators.required, Validators.pattern("[0-9]{10,}")]],
  "HighestEducation": ['', [Validators.required]],
  "EmailID1":['', Validators.required,],
  "StudentPassword": ['abc123', Validators.required,],
  "PreferedCountry1":['', Validators.required,],
  "CurrentInstitution": ['', [Validators.required]],
  "QuickCat_Name": ['', [Validators.required]],
  "QuickCourseName": ['', [Validators.required]],
  "countryisdcode": ['MY', Validators.required,],     
}); }  ngOnInit() { // making use of web API
this.httpService.get('url').subscribe(
  data => {
    this.selectCountries = data as string [];
  },
  (err:HttpErrorResponse) => {
    console.log(err.message);
  }
);

我想使用 formControlName 将选中国家/地区的 ID 发送到数据库，"PreferredCountry1"。如果选中，我得到的值为 true，如果未选中，则值为 false。

谢谢:)

Answer 1

抱歉发帖晚了。我自己做的;

我在选中复选框时触发了一个函数；

            <div id="foo" class="checkbox" *ngFor="let country of selectCountries">

              <label>
                <input type="checkbox" [checked]="check" id="uy" [value]="country.CountryID" name="countries" (change)="getCountries($event.target.value)">
                {{country.CountryName}}
              </label>
           </div>

在“.ts文件”中；

`public getCountries(event): void{
var country = event;
console.log(typeof(country));
var i;
for (i = 0; i<15; i++) {
        if (this.selectCountries[i]["CountryID"] == country){
          var k = this.selectCountries[i]["CountryName"];
          if (this.SC.indexOf(k) !== -1){
            this.SC.splice(this.SC.indexOf(k), 1);
              console.log(this.SC);
          } else {
            this.SC.push(k);     
            console.log(this.SC);
          }
          if (this.SID.indexOf(country) !== -1){
            this.SID.splice(this.SID.indexOf(country), 1);
            this.countrys = JSON.stringify(this.SID);
            console.log(this.countrys);
          } else {
            this.SID.push(country);
            this.countrys = JSON.stringify(this.SID);
            console.log(this.countrys);
          }
        }
      }
    }
onsave(data){
  console.log(data);
  this.selectedCountries = this.SC.toString();
  this.studentForm.controls.PreferedCountry1.setValue(this.selectedCountries);
  this.ser.studentReg(this.studentForm.value).subscribe((res) =>{ 
  console.log(res); 
 });
}

`

谢谢:)

使用复选框选择多个值并使用 angular 中的 formControlName 将它们发送到数据库 6

selecting multiple values using checkbox and sending them to db using formControlName in angular 6

multi-select

angular6