Angular 表格 select 并需要输入

Question

我希望 select 和表单输入是必需的。我尝试按照 angular 网站上的教程进行操作，但它对我不起作用，或者我混淆了一些东西。我该如何解决？

那是我的 html 文件：

<form [formGroup]="angForm"  class="form-inline my-5 my-lg-0">
  <select #emoji class="textboxclass" type="text" placeholder="Emojy" aria-label="Post" required>
    <option value="" disabled selected>Emojy</option>
    <option value="angry" style="background-image:url(~assets/emoticons/png/angry.png);">angry</option>
    <option value="bored" style="background-image:url(~assets/emoticons/png/bored.png);">bored</option>
    <option value="confused" style="background-image:url(~assets/emoticons/png/confused.png);">confused</option>
    <option value="embarrassed" style="background-image:url(~assets/emoticons/png/embarrassed.png);">embarrassed</option>
    <option value="happy" style="background-image:url(~assets/emoticons/png/happy.png);">happy</option>
    <option value="kissing" style="background-image:url(~assets/emoticons/png/kissing.png);">kissing</option>
    <option value="unhappy" style="background-image:url(~assets/emoticons/png/unhappy.png);">unhappy</option>
  </select>
  <input #text id="postText" name="postText" class="form-control" type="text" placeholder="Write your Mood" aria-label="Post"
         formControlName="postText" required>
  <div *ngIf="angForm.controls['postText'].invalid && (angForm.controls['postText'].dirty
  || angForm.controls['postText'].touched)" class="alert alert-danger">
    <div *ngIf="angForm.controls['postText'].errors.required">Text required</div>
  </div>


</form>

<button class="btn btn-outline-success my-2 my-sm-0" (click)="postMood(emoji.value, text.value)">Post </button >

这是我的组件文件：

import { Component, OnInit } from '@angular/core';
import {PostServiceService} from './post-service.service';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-post-service',
  templateUrl: './post-service.component.html',
  providers: [PostServiceService],
  styleUrls: ['./post-service.component.css']
})
export class PostServiceComponent implements OnInit {
  angForm: FormGroup;

  constructor(private postService: PostServiceService, private  fb: FormBuilder) {this.createForm(); }

  ngOnInit(): void {
  }

  createForm() {
    this.angForm = this.fb.group({postText: ['', Validators.required]});
  }

  postMood(emoji, text): void {
    this.postService.postMoods(emoji, text);
  }

}

Answer 1

在表单组中添加表情符号 selection。

this.angForm = this.fb.group({
  emoji: ['', Validators.required],
  postText: ['', Validators.required]
});

将 formControlName 添加到 select 元素

<select formControlName="emoji" ...>

最后，给按钮添加disabled属性，防止没有必填字段的情况发布心情。

<button [disabled]="angForm.invalid" ...>

您还可以删除元素上的引用并像这样访问表单值

postMood() {
  const emoji = this.angForm.get('emoji').value;
  const text = this.angForm.get('postText').value;
  this.postService.postMoods(emoji, text);
  // Call to reset the form values
  this.angForm.reset();
}

Angular 表格 select 并需要输入

Angular form select and input required

typescript

angular-cli

angular