小编Tay*_*man的帖子

我正在使用Angular 4,Reactive表单.我想在用户单击"提交/创建帐户"按钮时显示验证错误消息.这是我正在使用的HTML和打字稿代码.

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">

  <div class="form-group">
    <input type="text" 
           id="firstname" 
           name="firstname" 
           formControlName="firstname" 
           placeholder="First Name">
    <span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched" 
           class="help-block"> Please Enter First Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <input type="text" 
           id="lastname" 
           name="lastname" 
           formControlName="lastname" 
           placeholder="Last Name">
    <span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched" 
           class="help-block"> Please Enter Last Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <button type="submit" 
            class="btn btn-success btn-lg btn-qte">Create Account</button>
  </div>

</form>

TYPE SCRIPT CODE

export class UserRegistrationComponent implements OnInit {
    signupForm: FormGroup;

    ngOnInit() {
        this.signupForm = new FormGroup({
            'firstname': new FormControl(null, …

我有一个包含导航栏链接的键对值的对象数组，我已将该数组映射到列表并使其成功，但是当我尝试将类添加到仅活动链接时，它将类添加到所有链接项。

想知道我哪里出错了吗？

import React, { Component } from "react";
import { Link } from "react-router-dom";

class SideNavbar extends Component {
  constructor(props) {
    super(props);
    this.state = [
      { id: 1, name: "Link1", to: "/cms", className: "side_nav_item" },
      { id: 2, name: "Link2", to: "/cms", className: "side_nav_item" },
      { id: 3, name: "Link3", to: "/cms", className: "side_nav_item" },
      { id: 4, name: "Link4", to: "/cms", className: "side_nav_item" }
    ];
  }

  handleClick = () => {
    const currentClass = document.getElementsByClassName("side_nav_item");
    for (let i …

我有 4 个按钮，每个按钮都有唯一的值。我在控制台日志中使用当前代码未定义。

HTML

<button type="submit" class="parcel-btn weight-option" value="25" (click)="onItemSelector()">
<button type="submit" class="parcel-btn weight-option" value="50" (click)="onItemSelector()">
<button type="submit" class="parcel-btn weight-option" value="250" (click)="onItemSelector()">
<button type="submit" class="parcel-btn weight-option" value="100" (click)="onItemSelector()">

打字稿

onItemSelector() {
  const weightSelector = this.elm.nativeElement.querySelectorAll('.weight-option').value;
  console.log(weightSelector);
}

文字报价卡

    import React, {useRef, useState} from 'react'
    import {Link} from "react-router-dom";

    import {QuoteCardDropdown} from "../../utils/dropdowns";
    
    export const TextQuoteCard = () => {
    
        const [open, setOpen] = useState(false)
        const toggle = () => setOpen(!open)
        const [textQuote, setTextQuote] = useState([
        
            {
                userId: '123',
                userName: 'Tr',
                userImageUrl: 'https://qph.fs.quoracdn.net/main-thumb-892821828-200-lrcgeycqieflgsovvoxglqawinbcjhtv.jpeg',
                quoteId: 'TQ122',
                postDateTime: 'Fri',
                quoteAuthorId: '123',
                quoteAuthorName: 'Jhon Mart',
                quoteCategory: 'Motivational',
                quoteType: 'textQuote',
                quoteText: 'If there’s no market, about finding market opportunities, or creating opportunities. If there’s no market, then you need to grow one', …