我的patchValue适用于用户名输入,但不适用于我的注释输入

时间:2019-04-16 18:48:06

标签: angular-forms

下面是我的app.component.html文件,其中包含用户名输入和带有建议按钮的注释输入。建议使用的用户名按钮从我的打字稿文件中生成常量,但是用于注释的第二个按钮不返回任何内容。

以下是我的html文件:

<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form (ngSubmit)="onSubmit()" #f="ngForm">
        <div
          id="user-data"
          ngModelGroup="userData"
          #userData="ngModelGroup">

          <div class="form-group">
            <label for="username">Username</label>
            <input
              type="text"
              id="username"
              class="form-control"
              ngModel
              name="username"
              required>
          </div>
          <button
            class="btn btn-default"
            type="button"
            (click)="suggestUserName()">Suggest an Username
          </button>


          <div class="form-group">
            <label for="comment">Comment:</label>
            <input 
              type="text" 
              id="userComment" 
              class="form-control" 
              ngModel name="userComment" 
              required>
          </div>
          <button 
            class="btn btn-default" 
            type="button" 
            (click)="suggestUserComment()">Suggest a comment!
          </button>




          <div class="form-group">
            <label for="email">Mail</label>
            <input
              type="email"
              id="email"
              class="form-control"
              ngModel
              name="email"
              required
              email
              #email="ngModel">
            <span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
          </div>
        </div>
        <p *ngIf="!userData.valid && userData.touched">User Data is invalid!</p>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select
            id="secret"
            class="form-control"
            [ngModel]="defaultQuestion"
            name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>


        <div class="radio" *ngFor="let gender of genders">
          <label>
            <input
              type="radio"
              name="gender"
              ngModel
              [value]="gender"
              required>
            {{ gender }}
          </label>
        </div>
        <button
          class="btn btn-primary"
          type="submit"
          [disabled]="!f.valid">Submit</button>
      </form>
    </div>
  </div>
  <hr>
  <div class="row" *ngIf="submitted">
    <div class="col-xs-12">
      <h3>Your Data</h3>
      <p>Username: {{ user.username }}</p>
      <p>Mail: {{ user.email }}</p>
      <p>Secret Question: Your first {{ user.secretQuestion }}</p>
      <p>comment: {{user.comment}</p>
      <p>Gender: {{ user.gender }}</p>
    </div>
  </div>
</div>


这是我的打字稿文件:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('f') signupForm: NgForm;
  defaultQuestion = 'teacher';
  genders = ['male', 'female'];
  user = {
    username: '',
    email: '',
    secretQuestion: '',
    comment: '',
    gender: '',
  };
  submitted = false;

  suggestUserName() {
    const suggestedName = 'Superuser';
    this.signupForm.form.patchValue({
      userData: {
        username: suggestedName
      }
    });
    // this.signupForm.setValue({
    //   userData: {
    //     username: suggestedName,
    //     email: ''
    //   },
    //   secret: 'pet',
    //   questionAnswer: '',
    //   gender: 'male'
    // });

  }

  // onSubmit(form: NgForm) {
  //   console.log(form);
  // }
    suggestUserComment(){
    const suggestedComment = 'Amin Baghali'
    this.signupForm.form.patchValue({
      userData: {
        comment: suggestedComment
      }
    });
  }

  onSubmit() {
    this.submitted = true;
    this.user.username = this.signupForm.value.userData.username;
    this.user.email = this.signupForm.value.userData.email;
    this.user.secretQuestion = this.signupForm.value.secret;
    this.user.comment = this.signupForm.value.userData.comment;
    this.user.gender = this.signupForm.value.gender;

    this.signupForm.reset();
  }
}

0 个答案:

没有答案