如果输入字段有效,我该如何向输入字段添加新的类样式(在Angular 4中)

时间:2017-06-27 14:43:00

标签: angular angular-reactive-forms

我是Angular的新手,我正在研究Reactive Forms,如果输入文本有效且类“ng-valid”,我还在项目中包含了Bootstrap, 我需要将类“has-success”添加到父div,因此它将变为绿色并采用Bootstrap的样式。

3 个答案:

答案 0 :(得分:2)

试试这个

<input [ngClass]="{'has-success': true}" />

您可以为组件的任何变量替换true

答案 1 :(得分:0)

如果您正在使用ReactiveFormsModule,您可以制作类似这样的内容

组件

<TextView
            android:id="@+id/md_tv_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="2dp"
            android:autoLink="all"
            android:drawablePadding="24dp"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLines="3"
            android:text="www.google.com Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown p
            rinter took a galley of type and scrambled it to make a type specimen book. It has survived not only five
             centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popula
             rised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently wi
             th desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
            android:textSize="14sp"
            android:drawableLeft="@drawable/ic_info_grey" />

并在模板

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
        myControl: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(4)]],
    });
}

答案 2 :(得分:0)

当你只需要设置一个类而不是使用CREATE OR REPLACE FUNCTION truncate_tables(username IN VARCHAR) RETURNS void AS $$ DECLARE statements CURSOR FOR SELECT tablename FROM pg_tables WHERE tableowner = username AND schemaname = 'public'; BEGIN FOR stmt IN statements LOOP EXECUTE 'TRUNCATE TABLE ' || quote_ident(stmt.tablename) || ' CASCADE;'; IF EXISTS ( SELECT column_name FROM information_schema.columns WHERE table_name=quote_ident(stmt.tablename) and column_name='id' ) THEN EXECUTE 'ALTER SEQUENCE ' || quote_ident(stmt.tablename) || '_id_seq RESTART WITH 1'; END IF; END LOOP; END; $$ LANGUAGE plpgsql; 时,看起来更容易阅读,只需像这样设置类

ngClass

您可以将<div [class.has-success]="true"> 替换为任何表达式。 如果您需要帮助定位您的子元素,您可以发布您的html - 如果您想轻松复制/粘贴答案,请在小提琴/ plnkr中发布:)